CSS仿真翻页效果是目前网页设计中非常受欢迎的一种效果。通过CSS的transform属性和transition属性的组合,我们可以实现一个真实的翻书效果。
.book { perspective: 400px; position: relative; } .front-page,.back-page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s; } .front-page { backface-visibility: hidden; transform: rotateY(0deg); } .back-page { transform: rotateY(-180deg); } .flip { transform: rotateY(-180deg); }
以上是CSS的代码片段,在HTML中需要嵌套两个div,并且两个div上都需要设置front-page和back-page类名,而我们通过添加flip类名来实现翻页效果。
不难理解上述代码的含义: