transform 属性小解

css中transform包括三种: 旋转rotate(), translate()移动, 缩放scale(), skew()扭曲以及矩形变换matrix()

语法:

transform: none | <transform-function> [ <transform-function> ]*

transform: rotate | translate | scale | skew | matrix

注解: none: 表示不进行变换

<transform-function>表示可以多个变化叠加，彼此之间用空格隔开

适用范围:块级元素和内联元素均可使用

 

兼容性写法:

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-moz-transform:rotate(7deg); /* Firefox */

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */

-o-transform:rotate(7deg); /* Opera*/

 

------------------------------------------------------------------------------------------------

旋转:

1.rotate(a) (绕着旋转中心2D旋转)

参数是角度，单位是deg，不进行变换则为none

旋转中心:默认是对象正中心，可通过transform-origin来定义

兼容性: 均支持

eg:rotate(5deg)顺时针5度 rotate(-10deg)逆时针10度

 

2.rotateX(a) (绕着X轴3d旋转)

IE, opera不支持

3.rotateY(a) (绕着Y轴3d旋转)

IE, opera不支持

-----------------------------------------------------------------------------------------------------

位置变换:

1.translate(x,y)(2D位置变化)

单位可为px，em，rem和%

若未提供y则默认y为0，基点默认对象中心，可通过transform-origin改变

兼容性:均支持

 

2.translateX()在X轴方向上进行位置变换

3.translateY()在Y轴方向上进行位置变换

-------------------------------------------------------------------------------------------------------

缩放:

1.scale(x, y)

x,y为数字，缩放的比例

若未提供y则默认与x轴的缩放比例一样，可改变基点

兼容性:均支持

 

2.scaleX()

只在X轴方向上进行缩放

兼容性:均支持

3.scaleY()

只在X轴方向上进行缩放

兼容性:均支持

--------------------------------------------------------------------------------------------------------

拉伸:

1.skew(x, y)

单位是deg,在x，y轴方向上进行拉伸

若未提供y则默认为0

2.skew(x)

3.skew(y)

均兼容性良好

-----------------------------------------------------------------------------------------------------------

矩阵变换:

matrix(涉及数学上的矩阵，应用面小，此处先不做解释)

 

详情可参考:http://www.w3cplus.com/content/css3-transform