transform语法：
transform ： none | <transform-function> [ <transform-function> ]*
none为默认值，表示不进行变换
n个transform-function表示进行n种不同的变换。包括：rotate | scale | skew | translate |matrix;（每种变换中间用逗号分开）
transform:rotate(30deg) // 沿中心顺时针旋转30度
transform:translate(100px,20px) // 沿X轴向右移动100px，沿Y轴向下移动20px，同transform:translateX(100px)；transform:translateY(20px)
transform:scale(2,1.5) // X轴方向缩放两倍，Y轴方向缩放1.5倍，同transform:scaleX(2)；transform:scaleY(2)
transform:skew(30deg,10deg) // X轴方向扭曲30度，Y轴方向扭曲10度，同transform:skewX(30deg)；transform:skewY（10deg）
transform-origin，用来改变元素进行transform时的基点。
语法：transform-origin(X,Y)，x、y指定基点位置。同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%