2d变换

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ，他有几个属性值参数：

1. 旋转：rotate()
   transform-origin定义旋转的基点，rotate()设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转

2. 位移：translate()
   translateX()
   translateY()

3. 倾斜：skew() 单值表示x轴扭曲，Y轴不扭曲
   skewX()
   skewY()

4. 缩放：scale() 单值表示xy轴都一样
   scaleX()
   scaleY()
   具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。

5. matrix(, , , , , ): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素.
   
   变换组合时原理上是矩阵从右往左计算的。
   如transform: translate(100px) scale(1.5);

transform-origin：x y;默认点是元素的中心点。
其中X和Y的值可以是百分值,em,px，
其中X也可以是字符参数值left,center,right；
Y和X一样除了百分值外还可以设置字符值top,center,bottom，
这个看上去有点像我们background-position设置一样:
1、top left | left top 等价于 0 0 | 0% 0%

2、top | top center | center top 等价于 50% 0

3、right top | top right 等价于 100% 0

4、left | left center | center left 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50%（默认值）

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%