css动态效果

来源：互联网发布：淘宝主营率怎么修改编辑：程序博客网时间：2024/04/28 08:36

2D转换方法：

translate（）；

移动

.div{

transform:translate(200px,100px);

-webkit-transform:translate(200px,100px);//支持chrome

-ms-transform:translate(200px,100px);//支持ie

-o-transform:translate(200px,100px);//支持opera

-moz-transform:translate(200px,100px);//支持firefox

}

旋转

rotate（）；

.div{

transform:rotate(100deg);

-webkit-transform:rotate(100deg);

-ms-transform:rotate(100deg);

-o-transform:rotate(100deg,);

-moz-transform:rotate(100deg);

}

缩放

scale（）；

.div{

transform:scale(1,2);

-webkit-transform:scale(1,2);

-ms-transform：scale(1,2);

-o-transform:scale(1,2);

-moz-transform:scale(1,2);

}

倾斜

skew（）；

.div{

transform:skew(100deg，100deg);

-webkit-transform:rotate(100deg，100deg);

-ms-transform:rotate(100deg，100deg);

-o-transform:rotate(100deg,100deg);

-moz-transform:rotate(100deg，100deg);

}

matrix（）；

3D转换方法：

rotateX（）；

rotateY（）；

0 0