浅谈CSS3中的3D动画技术原理

摘要：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属性去实现的。要想实现炫酷的3D效果，这两个属性必须要理解深透。但是，现目前还必须要考虑到兼容性问题。不过我们相信，在不久的将来，IE8等老旧的浏览器就会退出互联网舞台，以后的页面效果CSS3将会大行其道，而3D效果在其中必会大放异彩，为我们的用户带来极高的视觉体验。

参考文献：

[1] 百度浏览器市场份额-百度流量统计研究院[EB/OL].http：///data/browser/.

[2] 大漠. 图解CSS3：核心技术与案例实战[M].北京： 机械工业出版社， 2014.