翻盖式CSS / HTML：翻盖时不显示卡的背面

问题描述

目标：我想在容器或网格内放置响应式卡片，如果响应更好，则该翻转。翻转后，卡片将在卡片正面显示有关该人的详细信息。

尝试过：我正在使用W3Schools翻转卡信息，但背面未显示。 https://www.w3schools.com/howto/howto_css_flip_card.asp

代码：到目前为止，我所拥有的。

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the Box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
   background-color: transparent;
   width: 20em;
   height: 29em;
   border: 1px solid #f1f1f1;
   perspective: 1000px;
   /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */

.flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   text-align: center;
   transition: transform 0.8s;
   transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip Box container */

.flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
}

/* Position the front and back side */

.flip-card-front,.flip-card-back {
   position: absolute;
   width: 100%;
   height: 100%;
   -webkit-backface-visibility: hidden;
   /* Safari */
   backface-visibility: hidden;
}

.flip-card-front {
   background-color: #bbb;
   color: black;
}

/* Style the back side */

.flip-card-back {
   background-color: dodgerblue;
   color: white;
   transform: rotateY(180deg);
}

   <div class="container-fluid">
      <h1>About Us</h1>
      <div class="-card-deck card-columns">
         <!-- Card: Dad (Owner) -->
         <div id="dad-owner" class="card flip-card">
            <div class="flip-card-inner">
               <div class="flip-card-front">
                  <img class="img-fluid" src="<?= $pathStart ?>static/images/Dad3x4.png" alt="dad-owner">
                  <h4 class="card-title">Kyle Field</h4>
                  <p class="card-text">Owner</p>
               </div>
            </div>
            <div class="flip-card-back">
               <h4 class="card-title">About Me</h4>
               <hr>
               <p class="card-text">
                  Lorem ipsum dolor sit amet,consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
            </div>
         </div>

         <!-- Card: Kyle (brother) -->
         <div id="kyle-brother" class="card flip-card">
            <div class="flip-card-inner">
               <div class="flip-card-front">
                  <img class="img-fluid" src="<?= $pathStart ?>static/images/KyleField3x4.png" alt="kyle-brother">
                  <h4 class="card-title">About Me</h4>
                  <p class="card-text">brother</p>
               </div>
            </div>
            <div class="flip-card-back">
               <h4 class="card-title">About Me</h4>
               <p class="card-text"> Lorem ipsum dolor sit amet,consectetur adipisicing elit. Fugiat tenetur
                  odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?</p>
            </div>
         </div>

         <!-- Card: Alix Field (Sister) -->
         <div id="alix-sister" class="card flip-card">
            <div class="flip-card-inner">
               <div class="flip-card-front">
                  <img class="img-fluid" src="<?= $pathStart ?>static/images/AlixField3x4.png" alt="alix-sister`">
                  <h4 class="card-title">Alix Field</h4>
                  <p class="card-text">Sister</p>
               </div>
            </div>
            <div class="flip-card-back">
               <h4 class="card-title">About Me</h4>
               <hr>
               <p class="card-text">
                  Lorem ipsum dolor sit amet,consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
            </div>
         </div>

         <!--  -->
         <div id="ramsey-besty" class="card flip-card">
            <div class="flip-card-inner">
               <div class="flip-card-front">
                  <img class="img-fluid" src="<?= $pathStart ?>static/images/RamseyBond3x4.png" alt="ramsey-besty">
                  <h4 class="card-title">Ramsey Bond</h4>
                  <p class="card-text">Besty</p>
               </div>
            </div>
            <div class="flip-card-back">
               <h4 class="card-title">About Me</h4>
               <p class="card-text">
                  Lorem ipsum dolor sit amet,consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
            </div>
         </div>
      </div>
   </div>

解决方法

嵌套div标签的顺序对于css规则很重要：

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
       <img class="img-fluid" src="<?= $pathStart ?>static/images/Dad3x4.png" alt="dad-owner">
                  <h4 class="card-title">Kyle Field</h4>
                  <p class="card-text">Owner</p>
    </div>
    <div class="flip-card-back">
               <p class="card-text">
                  Lorem ipsum dolor sit amet,consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
    </div>
  </div>
</div>


<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
       <img class="img-fluid" src="<?= $pathStart ?>static/images/Dad3x4.png" alt="dad-owner">
                  <h4 class="card-title">Kyle Field</h4>
                  <p class="card-text">Owner</p>
    </div>
    <div class="flip-card-back">
               <p class="card-text">
                  Lorem ipsum dolor sit amet,consectetur adipisicing elit. Fugiat tenetur odio suscipit non
                  commodi
                  vel
                  eius veniam maxime?
               </p>
    </div>
  </div>
</div>

您希望flip-card-front和flip-card-back div嵌套在flip-card-inner div中：

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <div class="flip-card-back">