transform属性适用于2D或3D变换的元素。这个属性允许你变形、旋转、缩放、倾斜元素。

transform的兼容情况:

对2D的兼容情况：

对3D的兼容情况：

对svg的兼容情况：

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix，语法如下：

transform: none|transform-functions;

none:表示不进行变换。transform-function表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。transform-origin可以改变transform过程中相对的基点。

一、旋转（rotate）

rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

See the Pen ogNxwX by dsky .

二、移动（translate）

translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。(与translate效果类似)
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义沿着 Y 轴的 3D 旋转。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。（无效果）

See the Pen azbZqJ by dsky .

三、缩放（scale）

scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。

See the Pen gbOMBZ by dsky .

四、扭曲（skew）

scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。