transform:变换
transform包含四种几本的变换:平移、旋转、缩放、倾斜。但这个属性在浏览器上的兼容性有区别。
浏览器支持:
IE Firefox Chrome Safari Opera 都支持
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。
所以在设置时要采用兼容写法:
box{
transform:rotate(20deg);
-ms-transform:rotate(20deg);//IE
-moz-transform:rotate(20deg);//Firefox
-webkit-transform:rotate(20deg);//Safari,Chrome
-o-transform:rotate(20deg);//Opera
}
JS语法:
object.style.transform="rotate(7deg)"
注:旋转(ratate)、倾斜(skew)的单位都是deg(degree),度数、角度.
平移(translate)的单位为px。
box{
transform:translateX(10px);
transform:rotate(10deg);
transform:scale(2,2);
transform:skew(20deg);
}