.flip-container {
perspective: 1000px;
position: relative;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 300px;
height: 200px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
}以上是代码实现，接下来大家来讲解一下它是如何实现效果的。
首先，在
元素中创建一个具有透视效果的容器，在这个容器内创建两个面，分别是正面和背面。正面显示图片，背面显示文字，然后设置.back的transform:rotateY(180deg)以实现翻转效果。
在CSS中，使用:hover伪类来触发翻转效果，并将.flipper div 中的transform属性设置为 rotateY（180）deg，使其在Y轴上旋转。
通过这样一个简单的代码实现，大家就可以在网页上增加生动的CSS3图片翻书效果。