Css中Transform的属性及使用

一，transform（变形）

1.transform字面的意思就是变形的意思，在CSS3中，transform支持的几个操作有

（1）旋转rotate

（2）扭曲skew

（3）缩放scale

（4）移动translate

（5）矩阵变形matrix

2.transform不会触发回流和重绘。

二，transform各操作使用介绍

1.rotate(xx deg)(2D), rotateX()(3D), rotateY()(3D)：以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转。

2.translate(x,y) ，translateX(x) ，translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移。

3.scale(x,y)，scaleX(x,1)， scaleY(1,Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。

4.skew(x,y)， skewX(x)， skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

三，基点

1.所有操作的默认的基点都在中心位置，我们可以使用transform-origin：(x,y)来改变元素基点。

x可以取left，center ，right，是水平方向取值，也可以取对应的百分值为

left=0%;center=50%;right=100%

y可以取top ，center， bottom，是垂直方向的取值，其中top=0%;center=50%;bottom=100%;

#tran{
  transform-orgin:(left,top);
  transform:rotate(30deg);
}

四，浏览器兼容

1.目前transform只支持IE10+，对IE9不支持，要兼容浏览器需要添加前缀

{
  transform:translate(10,10) // W3c标准
  -webkit-transform:translate(10,10) // Safari Chrome
  -moz-transform:translate(10,10) // firefox
  -ms-transform:translate(10,10) // IE9
  -o-transform:translate(10,10) // opera
}