CSS3中Transform动画属性的浏览器兼容性分析

css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器的兼容性。

本文重点介绍Transform动画属性的浏览器兼容性分析：

transform有四个属性：rotate、scale、skew和translate。

目前支持的浏览器如下：

（1）Safari 3.1+：支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

（2）Chrome 8+：支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

（3）Firefox 4+：支持替代的 -moz-transform 属性(3D 和 2D 转换)。

（4）Opera 10+：只支持 2D 转换。

（5）IE9+：支持替代的 -ms-transform 属性(仅适用于 2D 转换)。IE10+：支持替代的 -ms-transform 属性(3D 和 2D 转换)。

兼容性写法样例：

transform: rotate(45deg) scale(1.5) translate(150px, 200px);
-webkit-transform: rotate(45deg) scale(1.5) translate(150px, 200px);    /* for Chrome || Safari */
-moz-transform: rotate(45deg) scale(1.5) translate(150px, 200px);       /* for Firefox */
-ms-transform: rotate(45deg) scale(1.5) translate(150px, 200px);        /* for IE */
-o-transform: rotate(45deg) scale(1.5) translate(150px, 200px);         /* for Opera */