Flip-Card CSS/HTML: 翻转时卡片背面不显示

Question

目标： 我希望在容器或网格中放置响应式卡片，如果响应更好，则翻转。翻转卡片时，卡片正面会显示此人的详细信息。

试过：我正在使用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>

Answer 1

嵌套的 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">

Flip-Card CSS/HTML: 翻转时卡片背面不显示

Flip-Card CSS/HTML: The back of the card is not showing when flipped

html

css

transform

flip

card