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

Posted 2023-03-28

【中文标题】Flip-Card CSS/HTML：翻转时卡片背面不显示

【英文标题】：Flip-Card CSS/HTML: The back of the card is not showing when flipped

【发布时间】：2021-01-07 21:36:57

【问题描述】：

目标：我想在容器内有响应卡片，或者如果响应更好，则为网格，即翻转。翻转卡片时，卡片正面会显示此人的详细信息。

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

【参考方案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" >
                  <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" >
                  <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">

【讨论】：

天啊！！太感谢了！我因为这么简单的事情而失去了它。