transform的兼容性情况如下:
IE10/Firefox/Opera支持transform属性
IE9支持替代的-ms-transform属性仅支持2D转换
Safari和Chrome支持替代的-webkit-transform属性(3D和2D转换)
Opera只支持2D转换
细解下
scale缩放 skew扭曲
translate位移 rotate旋转
语法:
transform:rotate3d(number.number,number,numberdeg)/rotateX(numberdeg)/rotateY(numberdeg)/rotateZ(numberdeg)rotate(Xnumberdeg,Ynumberdeg,Znumberdeg)
scale或者skew等同样可以用上面这个语法,当然了skew不支持3D以及也没有shewZ选项
兼容性写法
-webkit-transform: Safari和Chrome
-moz-transform Firefox
-o-transform Opera
-ms-transform IE
.tran1{
transform:rotate(30deg)scale(0.6,0.3)skew(40deg,80deg)translate(10px,50px);background: red;
-webkit-transform:rotate(30deg)scale(0.6,0.3)skew(40deg,80deg)translate(10px,50px);
-ms-transform:rotate(30deg)scale(0.6,0.3)skew(40deg,80deg)translate(10px,50px);
-o-transform:rotate(30deg)scale(0.6,0.3)skew(40deg,80deg)translate(10px,50px);
}