Html2D变换

transform属性

关于2d转换方面主要就是了解一下transform属性和它的几个可选值。

 

1、translate（）

如下：表示的是将元素从当前位置向右移50像素，向下移100像素

 

transform: translate(50px,100px);

2、rotate（）

如下：是将元素顺时针旋转360度

 

transform: rotate(360deg);

3、scale（）

如下：将元素宽度增大2倍，高度增加3倍。

 

transform: scale(2,3);

如下：将元素宽度减小一半，高度减小一半。

 

 transform: scale(0.5,0.5);

补充：scalex（）改变宽度

 

           scaley（）改变高度

 

4、skew（）

如下：将元素沿x轴倾斜20度，同时沿y轴倾斜10度，但如果未指定第二个参数默认为零。

 

transform: skew(20deg,10deg);

补充：上式也可拆分为

 

transform: skewX(20deg);

transform: skewY(10deg);

5、matrix（）

表示的是将所有2D变换方法组合为一个。

 

transform: matrix(scalex(),skewY(),skewX(),scaleY(),translateX(),translateY());

 

 transform: matrix(1,-0.3,1,1,0,0);