HTMLcss实现翻页效果,⼀个纯CSS3实现的酷炫翻书效果
效果细节
其实项⽬中的关键在于⼏个属性，perspective和rotate，便是透视和旋转
rotate属性perspective
属性指定了观察者与z=0平⾯的距离，使具有三维位置变换的元素产⽣透视效果。z>0的三维元素⽐正常⼤，⽽z<0时则⽐正常⼩，⼤⼩程度由该属性的值决定
body {
/*perspective 属性指定了观察者与z=0平⾯的距离，使具有三维位置变换的元素产⽣透视效果。z>0的三维元素⽐正常⼤，⽽z<0时则⽐正常⼩，⼤⼩程度由该属性的值决定。默认情况下，消失点位于元素的中⼼，但是可以通过设置perspective-origin属性来改变其位置。*/
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
background-color: #212121;
font-family: '微软雅⿊';
}
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哦~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。