CSS3 2D转换

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

你好。这是一个 div 元素。

你好。这是一个 div 元素。

其实也就是平移

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

你好。这是一个 div 元素。

你好。这是一个 div 元素。

顺时针旋转了30°

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

在原来的位置上向外扩大

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

你好。这是一个 div 元素。

你好。这是一个 div 元素。

拉扯变形

matrix() 方法

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

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

你好。这是一个 div 元素。

你好。这是一个 div 元素。

函数	描述
matrix(n,n,n,n,n,n) 定义 2D 转换	使用六个值的矩阵
translate(x,y) 定义 2D 转换	沿着 X 和 Y 轴移动元素
translateX(n) 定义 2D 转换	沿着 X 轴移动元素
translateY(n) 定义 2D 转换	沿着 Y 轴移动元素
scale(x,y) 定义 2D 缩放转换	改变元素的宽度和高度
scaleX(n) 定义 2D 缩放转换	改变元素的宽度
scaleY(n) 定义 2D 缩放转换	改变元素的高度
rotate(angle) 定义 2D 旋转	在参数中规定角度
skew(x-angle,y-angle) 定义 2D 倾斜转换	沿着 X 和 Y 轴
skewX(angle) 定义 2D 倾斜转换	沿着 X 轴
skewY(angle) 定义 2D 倾斜转换	沿着 Y 轴

参考资料

W3C CSS3 2D转换