css3整理--transform

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%