css3 transform学习

可以通过js控制transform内的属性进行形状的大小变化、旋转、偏移等达到可控制动态展示效果。

1. rotate(旋转)

参数为旋转的角度，单位deg为度的意思，顾名思义，以**deg进行顺时针旋转。

如所例（transform：rotate(45deg) 所得下图）：（注：黄点为svg绘制，请忽略）

2. scale(缩放)

以1为单位、进行乘算、等比例放大或者缩小。

参数两种书写形式：1、只存在一个值时 ==> 水平与垂直方向同时等比例缩放。

                                2、存在两个值时 ==> 第一个值为水平方向缩放、第二个值为垂直方向缩放。

如图例：

也可以运用另外一种写法作用于一个方向：scale(1.5,1) ==> scaleX(1.5)

                                                                    scale(1,1.5) ==> scaleY(1.5)

3. translate(偏移)

参数为偏移的像素距离。

1、只存在一个参数时，表示水平偏移距离

2、存在两个参数时，第一个参数为水平偏移距离，第二个参数为垂直偏移距离。

抒写方式： transform：translate(0, 60px) ==>  transform：translateY(60px)

                   transform：translate(60px, 0) ==>  transform：translateX(60px)

4. skew(倾斜)

参数为倾斜的角度，单位deg为度的意思。以**deg进行向右倾斜。

如图(transform：skew(20deg) 所得下图)：

 5. 基准点 transform-origin

改变图形被transform作用时的中心点。

抒写形式由left、right、top、bottom、center进行组合所得的值。最多存在两个（左右跟上下除外）