我有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;
这些卡最终都在塔中左对齐,我需要它们在页面上排成一行。