css transform参考

语法
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)
参数：第一个参数表示的是水平方向上的偏移量
第二个参数表示的是竖直方向上的偏移量