transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ，他有几个属性值参数：
-
旋转：rotate()
transform-origin定义旋转的基点，rotate()设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转 -
位移：translate()
translateX()
translateY() -
倾斜：skew() 单值表示x轴扭曲，Y轴不扭曲
skewX()
skewY() -
缩放：scale() 单值表示xy轴都一样
scaleX()
scaleY()
具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。 -
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%