css3之transform详解

Transform，顾名思义，是“变形”之意，它是CSS3中重要的动画属性之一，包含“旋转rotate”、“扭曲skew”、“缩放scale”、“移动translate”以及“矩阵变形matrix”5种变形方式。

基本语法：

transform ： none | <transform-function>

none：表示不变形；

<transform-function>：表示一个或多个变换函数，指rotate 、 scale 、 skew 、translate 、matrix。Transform属性支持多种变换方式同时进行，不同变换方式需以空格隔开。元素默认基点就是其中心位置。

 

适用范围：

内联(inline)元素和块级(block)元素。

 

具体语法：

 

一、旋转（rotate）

rotate(<angle>) ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需提前定义transform-origin属性，即定义旋转的基点，其中angle是指旋转角度，正数值表示顺时针旋转，负值表示逆时针旋转。如：transform:rotate(30deg)表示顺时针旋转30度。

 

二、移动（translate）

移动（translate）有三种方式：translate(x,y)水平垂直方向同时移动（也就是X轴和Y轴同时移动）、translateX(x)仅水平方向移动（X轴移动）、translateY(Y)仅垂直方向移动（Y轴移动），如transform:translate(100px,20px)等。移动的默认基点是元素的中心，可以通过transform-origin改变移动的元素基点。

 

三、缩放（scale）

缩放（scale）也有三种方式：scale(x,y)元素水平垂直方向同时缩放（也就是X轴和Y轴同时缩放）、scaleX(x)元素仅水平方向缩放（X轴缩放）、scaleY(y)元素仅垂直方向缩放（Y轴缩放）。取值大于1表示放大、取值小于1表示缩小，另外，基点改变方式同上。

 

四、扭曲（skew）

扭曲（skew）同样具有三种方式：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。如：transform:skew(30deg,10deg):

 

 

 

 

 

五、矩阵（matrix）

matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，这里不详细介绍。

 

 附加说明：

改变元素基点transform-origin

transform-origin的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置。transform-origin(X,Y)用来设置元素的运动的基点（参照点），默认点是元素的中心点。其中X和Y的值可以是百分值、em和px，其中X值可以是left、center、right；Y值也可以是top,、center、bottom。实际上，这个取值类似于background-position，对熟悉css2的人来说很好理解。

 

浏览器兼容性

css3transform浏览器兼容性图例

如上图所示，ie9以下版本不支持transform属性，对于已支持的浏览器，具体写法也不同，如下：

//Mozilla内核浏览器：firefox3.5+

  -moz-transform-origin: x y;

  //Webkit内核浏览器：Safari and Chrome

  -webkit-transform-origin: x y;

  //Opera

  -o-transform-origin: x y ;

  //IE9

  -ms-transform-origin: x y;

  //W3C标准

  transform-origin: x y ;

  //Mozilla内核浏览器：firefox3.5+

  -moz-transform: rotate | scale | skew | translate ;

 //Webkit内核浏览器：Safari and Chrome

  -webkit-transform: rotate | scale | skew | translate ;

 //Opera

  -o-transform: rotate | scale | skew | translate ;

 //IE9

  -ms-transform: rotate | scale | skew | translate ;

 //W3C标准

  transform: rotate | scale | skew | translate ;