HTML5+CSS3从入门到精通一个纯CSS3实现的酷炫翻书效果浅析-职坐标

HTML5+CSS3从入门到精通一个纯CSS3实现的酷炫翻书效果浅析

沉沙 2018-06-12 来源：阅读 1936 评论 0

摘要：本篇教程讲解了一个纯CSS3实现的酷炫翻书效果，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

效果细节

其实关键在于几个属性，perspective和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轴翻转，也要注意到与transform-origin的配合，因为它是旋转轴，尤其关键。

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！

html5+css3从入门到精通pdf html5 css3从入门到精通pdf web前端开发html5+css3资料

本文由 @沉沙发布于职坐标。未经许可，禁止转载。