css transform参考

transform动效效率比较高，属于声明式动画，通过css class/property的变更实现动画， 但很难实现增量动画， 通过数据绑定直接将css的class与应用状态挂钩，transform动效将应用状态和动画状态分离，易于维护， js 、jquery 的animation属于命命令式动画，效率比较低，可以做增量动画， 维护比较麻烦，有时需将命令式动画和声明式动画结合。

javascript Animation 通过逐帧计算和设置css property来设置动画，可以进行更精确的控制（时间轴，缓动曲线，物理模拟，增量动画），需要在js主线程中进行大量计算

语法
transform ：none | <transform-function>[ <transform-function> ]*

取值
指定一个身份转变

说明
应用于block水平和inline水平的元素。
transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现
在设置了transform属性后，可以设置transform-origin属性，这个属性控制变形时的源点，也就是变形时围绕的点。这个属性接受两个参数，可以是百分比、top/center/bottom、带单位的数值。

兼容性
浏览器支持情况:-webkit-transform,-moz-transform,-o-transform,目前对CSS3动画支持的最好最全面的是webkit内核浏览器。

示例
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。有五种变形样式，可以重叠多种变形样式，以空格分隔

1. rotate 旋转效果
语法：-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-tranfsorm:rotate(30deg);
参数：括号里的参数表示的是旋转的角度，“deg”即“degree”的缩写，也就是角度的单位
2. skew 倾斜效果
语法：-webkit-transform:skew(30deg);
-moz-transform:skew(30deg);
-o-transform:translate(120px,50px);
参数：参数同rotate
3. scale 缩放效果
scale(0.6)效果 scale(-0.6)效果
语法：-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
参数：如果参数小于1则表示缩小，大于1则表示放大
如果参数为负数且绝对值小于1则反转后缩小，否则反转后放大
（4）translate 位移效果
语法： -webkit-transform:translate(120px,100px);
-webkit-transform: translateY(-100%);
-moz-transform:translate(120px,100px)
-o-transform:translate(120px,100px)
参数：第一个参数表示的是水平方向上的偏移量
第二个参数表示的是竖直方向上的偏移量