效果展示：
代码展示：
[html]
<div class="card">
<div class="card-inner">
<div class="font"></div>
<div class="back"></div>
</div>
</div>
[css]
.card {
width: 100px;
height: 161.8px;
perspective: 1000px; /*定义3D元素的视图距离*/
}
.card-inner {
width: inherit;
height: inherit;
position: relative;
transition: 0.5s;
transform-style: preserve-3d; /*子元素将保留其 3D 位置。*/
}
.font,.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /*隐藏被旋转的 div 元素的背面*/
}
.font {
background: PaleTurquoise;
transform: rotateY(180deg);
}
.back {
background: Moccasin;
transform: rotateY(0);
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
