CSS Card Flips不会彼此相邻

时间:2018-03-23 16:39:15

标签: html css

我有3张卡片在悬停时翻转,但是他们不会彼此相邻,而是从上到下。它们应该是彼此相邻的,纵向填满整个页面,而是使页面非常长,并且必须向下滚动才能访问所有信息。



/* entire container, keeps perspective */

.flip-container {
  perspective: 1000px;
}


/* flip the pane when hovered */

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 350px;
  height: 480px;
}


/* flip speed goes here */

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


/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}


/* front pane, placed above back */

.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
}

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <!-- front content -->
      <p class="title3">Certifications<sub>+</sub></p>
    </div>
    <div class="back">
      <!-- back content -->
      <p class="title3">Certifications</p>
      <p class="text">
        <ul>
          <li>SDA Certified</li>
          <li>ETA Customer Service Specialist</li>
          <li>ICT Spreadsheet Essentials</li>
          <li>ICT CyberSecurity Essentials</li>
          <li>FERPA 101 for Local Education Agencies</li>
          <li>FERPA 201: Data Sharing</li>
          <li>FERPA for Colleges and Universities</li>
          <li>GCN Seclusion and Restraint - MI</li>
          <li>Nominee of National Academy of Future Scientists and Technologists</li>
        </ul>
    </div>
  </div>
&#13;
&#13;
&#13;

这些卡最终都在塔中左对齐,我需要它们在页面上排成一行。

0 个答案:

没有答案