浅谈CSS3中的3D动画技术原理
作者：石磊
来源：《电脑知识与技术》2015年第05期
        摘要：CSS，又叫层叠样式表，是网页表现代码，目前最新的版本是CSS3。相比CSS2而言，CSS3新增了很多属性，尤其引人瞩目的当属3D和动画属性，通过它们可以在浏览器中轻松实现3D动画，而不需借助flash或者javascript。该文就对CSS3的3D动画进行了初步探讨，同时对CSS3中3D动画的应用案例进行了介绍。
        关键词：CSS3；3D动画网站开发
        中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2015）05-0227-01
        随着互联网的蓬勃发展，IE6已经退出历史舞台，IE8的也开始走下坡路，并跌落到了25%以内[1]（IE6～IE8不支持CSS3）。CSS3逐步在互联网上流行起来，并在得到了大量应用，比如，腾讯浏览器，迅雷软件，360急速浏览器等。相比CSS2而言，CSS3新增了很多属性，尤其引人瞩目的就是3D属性和动画属性。通过它们，我们可以在网页中轻松地实现3D动画。
        为了更好的探讨3D动画，笔者在页面上创建了一个蓝div标签，其代码如下：
        1 CSS3的3D属性
        CSS3中的3D效果主要是通过transform属性实现。本文仅以rotateY为例，讲解3D效果。要理解3D变换，首先要了解3D坐标系，如下图所示：
        水平方向代表x轴，垂直方向代表y轴，垂直于屏幕的方向则是z轴。属性rotateY就是“以y轴为中心进行旋转”[2]。我们为blue标签添加transform属性，如下所示：
        [＼&.blue{
        transform：rotateY（45deg）；
        我们让这个蓝块围绕y轴旋转45度（deg）。可以看到，蓝方块确实发生了”旋转”，但是这个“旋转”跟变窄没有区别，缺少了3D中的“透视”效果。
        透视属性（perspective）是加在容器上的，表明该容器是一个3D透视空间。我们给big添加透视：
        可以看到，蓝块具有了“近大远小”的透视效果，视觉上出现了3D的既视感。perspective的属性值表示的是透视的距离。值越大，透视效果越明显。
        2 CSS3的动画属性
        CSS3的动画是通过关键帧keyframes来实现的，如下：
        @keyframesAni_name{0%{ }100%{ }}
        Keyframes中间百分比是指动画进度，从0%到100%，中间可以插入相应的百分比。每个百分比后面有一对大括号，对应的属性写在这对大括号之间。Ani_name是动画名字。CSS3可以同时执行多个动画，要区分各个动画就要给每个动画命名。
        3 CSS3中的3D动画
        我们要让蓝块自动围绕y轴旋转。0%时，它还没有旋转，就设rotageY的值为0度；100%时，rotageY的值为360度。同时给动画命名为ani：
        @keyframesani{
        0%{transform：rotateY（0deg）； }
        100%{transform：rotateY（360deg）；}
        }
        Keyframes只是定义了动画，但是要把动画运用在指定的标签上，还需要animation属性，如下：
        .blue{ animation：ani 2slinearinfinite；}
        这段代码的含义是让蓝块执行ani所指定的动画，并且在2秒中匀速（linear）的从0%执行到100%，且无限次（infinite）循环的执行下去。
        这样，我们的蓝块就会匀速自动的翻转下去。如果要得到其他效果，我们可以尝试更改transform的其他属性，比如rotateX、rotateZ、scale等等。
        4 兼容性问题
        CSS3的3D动画很酷，不用flash，也不用写javascript代码，使用起来很是方便。但是它的兼容性很不好，IE8及其以前的浏览器都不支持它。因此，在项目开发中是否要用到3D效果，需要根据项目的需求来定。
        5 结束语
        CSS3中的3D动画，主要就是通过transform和keyframes属性去实现的。要想实现炫酷的html animation属性3D效果，这两个属性必须要理解深透。但是，现目前还必须要考虑到兼容性问题。不过我们相信，在不久的将来，IE8等老旧的浏览器就会退出互联网舞台，以后的页面效果CSS3将会大行其道，而3D效果在其中必会大放异彩，为我们的用户带来极高的视觉体验。
        参考文献：
        [1] 百度浏览器市场份额-百度流量统计研究院[EB/OL].http：//tongji.baidu/data/browser/.
        [2] 大漠. 图解CSS3：核心技术与案例实战[M].北京： 机械工业出版社， 2014.

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