0

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

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

4

1 回答 1

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>

您希望divflip-card-front和flip-card-backdiv 都嵌套在flip-card-innerdiv 中：

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <div class="flip-card-back">
于 2020-09-21T18:58:27.823 回答