transform属性向元素应用2D或3D转换，该属性允许我们对元素进行旋转，缩放，移动或倾斜。
注：Chrome和Safari要求前缀 -webkit- 版本；Internet Explorer 9要求前缀 -ms- 版本。
2D转换方法：
- translate() 根据左(x轴)和顶部(y轴)位置给定的参数，从当前元素位置移动。
如：
div{
transform:translate(50px,100px);/*是从左边元素移动50个像素，并从顶部移动100像素*/
-ms-transform:translate(50px,100px);
-webkit-transform:translate(50px,100px);
}
- rotate()在一个给定度数顺时针旋转的元素，负值是允许的，这样元素是逆时针旋转。
div{
transform:rotate(30deg);/*顺时针旋转30度*/
}
- scale()元素增加或减少的大小，取决于宽度(x轴)和高度(y轴)的参数；
div{
transform:scale(2,3);/*转变宽度为原来的大小的2倍，和其原始大小3倍的高度*/
}
- skew():包含两个参数值，分别表示x轴和y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
- skewX(<angle>):表示只在X轴(水平方向)倾斜。
- skewY(<angle>):表示只在Y轴(垂直方向)倾斜。
div{
transform:skew(30deg,40deg);/*元素在X轴倾斜30度，在Y轴上倾斜40度*/
}
- matrix()方法和2D变换方法合并成一个。
matrix方法有六个参数，包含旋转，缩放，移动(平移)和倾斜功能。
div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);/*使div元素旋转30度*/
}
3D转换方法：
注：紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
- rotateX()：围绕其在一个给定度数X轴旋转的元素。
- rotateY()：围绕其在一个给定度数Y轴旋转的元素。
图片来自菜鸟教程网.png
