css3中的变形（transform）

transform 字面上的意思就是 使改变外观、改变形态
在css3中transform主要包括以下几种:

1.旋转 rotate
2.倾斜 skew
3.缩放 scale
4.移动 translate

语法
transform：none
transform：rotate | skew | scale | translate

none：表示不进行变换
表示一个或多个变换函数，空格分开，意思就是我们同时对一个元素进行transform的多种属性操作，使用多个属性时需要有空格隔开

一、旋转rotate
transform:rotate()；
旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”
rotate()方法，
通过指定的角度参数对元素指定一个2D rotation(2D旋转)
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

二、倾斜 skew
倾斜具有三种情况
skew(x,y)使元素在水平和垂直方向同时倾斜（X轴和Y轴同时按一定的角度值进行倾斜变形）；

skewX(x)仅使元素在水平方向倾斜变形（X轴倾斜变形）；
skewY(y)仅使元素在垂直方向倾斜变形（Y轴倾斜变形）;

三、缩放 scale
缩放scale和倾斜skew是极其相似，也具有三种情况
scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）;

scaleX(x)元素仅水平方向缩放（X轴缩放）；
scaleY(y)元素仅垂直方向缩放（Y轴缩放）;

四、移动translate
移动translate和skew、scale一样同样具有三种情况
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；

translateX(x)仅水平方向移动（X轴移动）；
translateY(Y)仅垂直方向移动（Y轴移动）;