CSS3 transform变形（2D转换）

　　transform 属性应用于2D 或 3D 转换。该属性允许我们对元素进行平移、旋转、缩放或倾斜。

一.translate(x,y)、translateX(n)、translateY(n)定义2D平移转换

　　根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

　　 若translate(x,y)只定义一个数值，默认y=0。

　　translateX(n):沿着 Y 轴移动元素。

　　translateY(n):沿着 Y 轴移动元素。

　　如下代码中：translate(50px,100px)表示从左向右移动50个像素，并从上向下移动100像素

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}  

　　效果如下所示：

　　

二.rotate(angle)定义2D旋转转换

　　定义 2D 旋转，在参数中规定角度。

　　angle为正值表示顺时针旋转，angle为负值表示逆时针旋转。

　　如下代码中，rotate(30deg)表示元素顺时针旋转30度。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}  

　　效果如下所示：

　　

　　注：transform-origin 可以设置旋转基点位置，默认是中心点。

　　语法：transform-origin: x-axis y-axis

　　

值	描述
x-axis	定义基点被置于 X 轴的何处。 可能的值： left center right length %
y-axis	定义基点被置于 Y 轴的何处。 可能的值： top center bottom length %

三、scale(x,y)、scaleX(n)、scaleY(n)定义2D缩放转换

　　scale(x,y)方法，元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

　　若只写一个值，表示x=y。

　　scaleX(n)：改变元素的宽度，宽度为原来的n倍。

　　scaleY(n)：改变元素的高度，高度为原来的n倍。

　　如下代码中，scale(1.4,1.5)缩放宽度为原来的1.4倍，高度为原来的1.5倍。

div
{
transform: scale(1.4,1.5);
-ms-transform: scale(1.4,1.5); /* IE 9 */
-webkit-transform: scale(1.4,1.5); /* Safari and Chrome */
}  

　　效果如下所示：

　　

四.skew(x-angle,y-angle)、skewX(angle)、skewY(angle)定义2D倾斜转换

　　skew(x-angle,y-angle)方法中，x-angle表示x轴方向倾斜的角度，y-angle表示y轴方向倾斜的角度。

　  若只写一个值，表示第二个参数默认为0。

　　skewX( ):表示只在X轴(水平方向)倾斜。

　  skewY( ):表示只在Y轴(垂直方向)倾斜。

　  如下代码中，

div
{
    transform:skew(10deg,20deg);
    -ms-transform:skew(10deg,20deg); /* IE 9 */
    -webkit-transform:skew(10deg,20deg); /* Safari and Chrome */
}

　　效果如下图所示：

　　

 五.matrix(n,n,n,n,n,n)定义2D转换，使用六个值的矩阵

　　matrix() 方法把所有 2D 转换方法组合在一起。

　　matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。

div
{
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

　　效果如下图所示：