可以通过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进行组合所得的值。最多存在两个（左右跟上下除外）
