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）；}
使用负值的效果就是垂直的翻转元素