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

阅读 2688
收藏 97
2016-07-27
原文链接:bupt-hjm.github.io
项目地址:github.com/BUPT-HJM/cs… demo地址:bupt-hjm.github.io/css3-flip-b… 欢迎大家的star啦~

项目细节

其实项目中的关键在于几个属性,perspectiverotate

perspective

属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大,而z<0时则比正常小,大小程度由该属性的值决定< p="">

body {
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
            perspective: 1000px;            
            background-color: #212121;            
            font-family: '微软雅黑';        }

preserve-3d

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

.preserve-3d {
            -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哦~

可自由转载、引用,但需署名作者且注明文章出处。

评论