最近在项目中用到了CSS3中的动画属性。无奈对于css3几个新加的属性不太熟悉，常常容易搞混。所以从网站研究了点资料，总结一下，方便有需要的朋友们可以参考学习。

transform 和 translate transform指变换、变形，是css3的一个属性，和其他width，height属性一样 translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少 例如： transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离 transform：translate(-20px,0) 表示从元素的当前位置

Transform在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形变形工具。 关于图形变形的基础条件当中的原点设定，在css里面使用的是transform-origin来

最近应公司需求，需要用css3做动画，终于把以前一直傻傻分不清楚的三个属性理解了。 索性在这里进行一个简单的对比，加深自己的记忆。 浏览器兼容性 CSS3 transform 属性 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D