CSS3 2D Transform
位移translate()函数
结合起来，translate()函数移动元素主要有以下三种移动：
- 水平移动：向右移动
translate(tx,0)和向左移动translate(-tx,0)； - 垂直移动：向上移动
translate(0,-ty)和向下移动translate(0,ty); - 对角移动：右下角移动
translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。
translate只有一个值的时候默认为translate(tx 0)
缩放scale()函数
缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。
在scale()函数中，取值除了可以取正值之外，同时还可以取负值。只不过取负值时，会先让元素进行翻转，然后在进行缩放。
scale()函数对元素进行缩放时，都是以元素的中心为基点，但可以通过transform-origin来改变元素的基点。
但是，要小心，如果你将值设置为“0”时，元素将会消失。我想，如果没必要，你是不会这样做的。当我们仅给scale() 函数只显式设置一个值时，会使对象成正比例放大或缩小。如果需要将对象在X轴和Y轴两个方向设置不同的值。
scale()函数和translate()函数极其相似，除了能通过scale()函数使用元素水平方向和垂直方向同时缩放（也就是元素沿X轴和Y轴同时缩放）之外，也可以使元素仅沿着X轴或Y轴方向缩放：
scale(sx)scale(sx,sy)- scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
- scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
旋转rotate()函数
rotate()函数的使用很简单，其基本语法如下：
rotate(a);
rotate()函数只接受一个值，
a：代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转。
在默认之下，rotate()函数旋转元素是相对于元素中心点进行旋转，同样，我们可以通过transform-origin属性重置元素的旋转原点：
div img:nth-child(2){
z-index: 2;
transform-origin: top left;
transform: rotate(45deg);
}
倾斜skew()函数
倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。
skew(ax)
或者
skew(ax,ay)
其属性值说明如下：
- ax：用来指定元素水平方向（X轴方向）倾斜的角度。
- ay：用来指定元素垂直方向（Y轴方向）倾斜的角度。如果未显式的设置这个值，其默认为０。
