css3仿真翻页

CSS3是一项非常实用的技术，其中仿真翻页是一项非常有趣的特性。

.book {
    width: 400px;
    height: 600px;
    perspective: 1000px;
}
.page {
    width: 200px;
    height: 300px;
    position: absolute;
    transform-style: preserve-3d;
    transition: 1s;
}
.page:nth-child(odd) {
    transform-origin: left center;
    transform: rotateY(-180deg);
}
.page:nth-child(even) {
    transform-origin: right center;
    transform: rotateY(0deg);
}
.book:hover .page:nth-child(odd) {
    transform: rotateY(-10deg);
}
.book:hover .page:nth-child(even) {
    transform: rotateY(10deg);
}
    

如上所示，我们为一个拥有perspective的book容器设置了一些样式，以及它的两个翻页元素page，其中它们被旋转了180度，而且只显示容器的一半，这样我们便可以让它们看起来是对折的页面，然后我们通过设置hover状态来让书的翻页仿真。

这是CSS3中仿真翻页的一个简单的例子，但是无论从代码还是效果上看，都很有趣并且很实用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！