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 ;
基本语法:
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 ;