使用纯CSS3实现的酷炫翻书动画效果4319
项目中的关键在于几个属性,perspective和rotate,便是透视和旋转

perspective
属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大,而z<0时则比正常小,大小程度由该属性的值决定
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的配合,因为它是旋转轴,尤其关键。
      立即下载 ( 文件大小:0.00 M)

    浏览器兼容性

    1. IE 9
    2. Mozilla Firefox
    3. Google Chrome
    4. Oper
    5. Safari

    技术讨论区

    1. 请先登录

        发 布

    键盘快捷键: 上一个 下一个