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