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);
}



posted on 2015-06-11 13:19  非洲来的蚂蚁  阅读(180)  评论(0编辑  收藏  举报