一个纯CSS3实现的酷炫翻书效果

项目地址：https://github.com/BUPT-HJM/c...
demo地址：https://bupt-hjm.github.io/cs...
欢迎大家的star啦~

效果细节

其实项目中的关键在于几个属性，perspective和rotate,便是透视和旋转

perspective

属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z
body {
/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z

preserve-3d

transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

.preserve-3d {
/transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

rotate

在这个效果中rotate起到了很重要的作用，特别是rotateY，沿着Y轴翻转，你所看到的书本的翻页，便是用animation的@keyframe动画实现rotateY的变化,实现翻页效果跟，也要注意到与transform-origin的配合，因为它是旋转轴，尤其关键。

欢迎踩踏github，给star啦~

其他便是css的布局与html的配合了，想要了解详细的可以去github看源码学习，欢迎指正，记得给star哦~

关键字：css, html, 元素, 属性

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！