css transfotm(变化)

来源：互联网发布：linux终端粘贴快捷键编辑：程序博客网时间：2024/05/24 07:30

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

0 0