Видимость элементов после 3d-поворота

document.getElementById('main-request').addEventListener('click', e => { 
  e.preventDefault(); 
  document.querySelector('.flip-card').classList.toggle('is-flipped'); 
});

.mycolor { 
  background-color: #4d367b; 
} 
 
.w-30 { 
  width: 30% !important; 
} 
 
.ask-btn, 
.navbar-brand, 
.nav-link { 
  -moz-transition: color .2s ease-in; 
  -o-transition: color .2s ease-in; 
  -webkit-transition: color .2s ease-in; 
  transition: all .2s ease-in; 
} 
 
.ask-btn:hover { 
  background-color: #3DCC3C; 
} 
 
.flip-card-scene { 
  margin-top: 20px; 
  perspective: 2500px; 
  height: 120px; 
} 
 
.flip-card { 
  width: 100%; 
  height: 100%; 
  position: relative; 
  transition: transform 1s; 
  transform-style: preserve-3d; 
  background-color: lightgreen; 
} 
 
.is-flipped { 
  transform: rotateY(180deg); 
} 
 
.card-face { 
  position: absolute; 
  height: 100%; 
  width: 100%; 
  backface-visibility: hidden; 
} 
 
.card-front {} 
 
.card-back { 
  transform: rotateY( 180deg); 
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container content-wrap"> 
  <div class="flip-card-scene"> 
    <div class="flip-card"> 
      <div class="card-face card-front"> 
        <h4 class="text-center my-3 text-secondary" id="main-title">Front Title</h4> 
        <!-- main title --> 
        <div class="row mb-4"> 
          <div class="col-md-12 text-center"> 
            <button type="button" class="btn ask-btn text-white mycolor w-30" id="main-request">Action</button> 
          </div> 
        </div> 
      </div> 
      <div class="card-face card-back"> 
        <h4 class="text-center my-3 text-secondary">Back Title</h4> 
        <!-- main title --> 
        <div class="row" id="cart-cont2"> 
          <div class="col-md-12 text-center"> 
            <button type="button" class="btn text-white w-25">Back</button> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div>