css3 -- 2D变换

时间:2023-03-09 04:15:10
css3 -- 2D变换

1、transform

1 E{
2 -moz-transform:function(value);
3 -ms-transform:function(value);
4 -o-transform:function(value);
5 -webkit-transform:function(value);
6 transform:function(value);
7 }

2、旋转

1 h2{transform:rotate(-25deg);}

原始的,转换前的元素会保持它在文档流中的位置,所以后续的所有元素都会受到它的影响,经过变换的元素并不影响页面的布局,但它会位于页面剩余部分之上的一个新层次上,这就意味着这个新的元素可以覆盖后续的元素

3、变换原点

1 E{transform-origin:0 0 ;}

4、平移

 E{
transform:translateX(value);
transform:translateY(value);
}
E{transform:translate(translateX,translateY);}

经过变换的元素会保留它本身的位置

5、倾斜

 E{
transform:skewX(value);
transform:skewY(value);
}
E{transform:skew(skewX,skewY);}

6、缩放

  E{
transform:scaleX(value);
transform:scaleY(value);
}
E{transform:scale(scaleX,scaleY);}
使用负值的效果就是垂直的翻转元素