transform属性 元素应用2D或3D转换

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