H2在转换后的div重新变为初始状态时移动

Question

我正在使用引导卡通过CSS制作transform rotate，并看到卡的“背面”部分。我正在将div和img与h2一起使用。我的问题是：当我使用:hover旋转div并在mouseout时再次获得初始位置时，h2会移动一点。您可以看到一个实时示例here（单击“ rucab”菜单按钮链接）。它仅发生在少数几个项目中，而不是全部发生。

<div class="container">
        <div class="col-lg-12 mx-auto">
          <div class="container">
  <div class="row icons-info">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
       <div class="container mt-3 pb-5 pt-5">
            <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/Icono%20Casa-04.png">
            <h2>ABIERTO 24/7</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>con seguridad las 24 h y trabajadores de la residencia.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->
    </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
      <div class="container  mt-3 mb-2 pb-5 pt-5">
            <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/Icono%20Wifi-04.png">
            <h2>FREE WI-FI</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>conectividad permanente en todas las instalaciones.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->
    </div>
  </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
      <div class="container  mt-3 mb-2 pb-5 pt-5">
            <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/Icono%20Gym-04.png">
            <h2>GIMNASIO</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>recinto totalmente reformado con maquinaria nueva para tu actividad física diaria.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->      
                </div>
    </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">

                  <div class="container mt-3 mb-2 pb-5 pt-5">            
            <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/Icono-Piscina-04.png">
            <h2>PISCINA</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>para disfrutar con los amigos o simplemente para relajarte o hacer deporte.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->  
      </div>
    </div>
    </div>
  </div>
    <div class="row icons-info">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
       <div class="container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/Icono%20Libro-04.png">
            <h2>BIBLIOTECAS</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>zona de estudio amplia  y silenciosa donde estudiar o hacer consultas.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->  
    </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
                 <div class="container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/Icono%20Comedor-04.png">
            <h2>COMEDOR</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>gran zona común para disfrutar del desayuno, comida y cena.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->    
    </div>
  </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
                 <div class="container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/Icono%20Comunidad-04.png">
            <h2>COMUNIDAD</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>actividades e iniciativas que hacen posible “#WeAreRucab”</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->    
      </div>
    </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 ">

                                        <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/eventos.png">
            <h2>AUDITORIO</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>un espacio para disfrutar de multitud de propuestas culturales y de ocio.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->  
      </div>
    </div>

  </div>
   <div class="row icons-info">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">        
                               <div class="container mb-3 pb-5 pt-5"> 
                                        <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/chill.png">
            <h2>CHILL OUT</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>zonas ajardinadas y de chill out para encontrar la relajación y diversión que llevas dentro.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->  
    </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
                 <div class="container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class="card-flip">
                    <div class="flip">
                        <div class="front">
                            <!-- front content -->
                            <div class="card">
                                <div class="card-block">
                                        <img src="img/Icono%20Comedor-04.png">
            <h2>COMEDOR</h2>
                        </div>
                        </div>
                        </div>
                        <div class="back">
                            <!-- back content -->
                            <div class="card">
                              <div class="card-block">
                                <p>gran zona común para disfrutar del desayuno, comida y cena.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->   
    </div>
  </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
      <div class="container   pb-5 pt-5">
            <img src="img/Icono%20Comunidad-04.png">
            <h2>COMUNIDAD</h2>
      </div>
    </div>
   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
      <div class="container   pb-5 pt-5">
            <img src="img/Icono%20Comunidad-04.png">
            <h2>COMUNIDAD</h2>
      </div>
    </div>

</div>

</div>

CSS

    .back .card .card-block {
    height: inherit;
    }
        .back .card .card-block p {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    align-items: center;
    font-size: 1.3em;
    height: 100%;
    line-height: 1.3em;
    display: flex;
    justify-content: center;
    color: #fff;
            }


    .card {
    background: transparent !important;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    border: 0px !important;
    height: inherit;
    border-radius: 0px !important;  

        }
    .back .card .card-block {
                  background: #fbc00c;
        }
        .back .card .card-block h2 { 
         padding-bottom: 10px;   
        }
    .card-flip {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.card-flip:hover .flip, .card-flip.hover .flip {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;

}

.card-flip,
.front,
.back {
  position: relative;
  display: block;
}

.flip {
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  top: 0;
  left: 0;
  height: 100%;
}

.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
          position: absolute;
          top: 0;
          left: 0;
}