版本：CSS3

CSS数据类型用于对元素的显示做变换。通常，这种变换可以由矩阵表示，并且可以使用每个点上的矩阵乘法来确定所得到的图像。

浏览器支持

浏览器都支持数据类型

2D图形的坐标系统

目前有多种用来描述转换坐标模型，最常用的是笛卡尔坐标系统和齐次坐标

笛卡尔坐标

在笛卡尔坐标系中，每个欧氏空间里的点都由横坐标和纵坐标这两个值来确定。在CSS（和大部分的计算机图形学）中，原点(0, 0)在元素的左上角。每个点都使用数学上的向量符号(x,y)来描述。

每个线性函数使用 2 × 2 矩阵描述，如:

a   c
b   d

将矩阵乘法用于上述坐标系中的每个点，一个变换就形成了：

可以在一行中进行多次矩阵乘法进行变换：

有了这种方法，就可以描述大部分常见的变换并因此可以将他们组合起来，如：旋转、缩放或拉伸。（事实上，所有线性函数的变换都可以被描述。）组合的变换是从右到左生效的。然而，有一种常见的变换并不是线性的，所以当这种变换要用这种方法来表示时，应该被单独列出来：位移。位移的向量(tx, ty)必须单独表示，作为两个附加参数。

齐次坐标

奥古斯特·费迪南德·莫比乌斯的齐次坐标系表示了一个 3 × 3 的变换矩阵，虽然它对于非专业的人来说更复杂和少见，这并不影响将它表示为线性函数，并且这样就不需要考虑额外的特例。

matrix()

CSS 函数 matrix()用六个指定的值来指定一个均匀的二维（2D）变换矩阵。这个矩形中的常量值是不作为参数进行传递的，其他的参数则在主要列的顺序中描述。

matrix(a, b, c, d, tx, ty)是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)的简写

语法

matrix(a, b, c, d, tx, ty)

• a b c d：以的格式来描述线性变换
• tx ty：以的格式来描述变换的量

笛卡尔坐标系中用二阶矩阵表示的点坐标	齐次坐标系中用三阶矩阵表示的点坐标	笛卡尔坐标系中用三阶矩阵表示的点坐标	齐次坐标系中用四阶矩阵表示的点坐标
a td>ctd>tr>table>fenced>ath> b td>dtd>tr>	a td>c td>tytd>tr>table>fenced>ath> b td>d td>txtd>tr> 0 td>0 td>1td>tr>	a td>c td>tytd>tr>table>fenced>ath> b td>d td>txtd>tr> 0 td>0 td>1td>tr>	a td>c td>0 td>txtd>tr>table>fenced>ath> b td>d td>0 td>tytd>tr> 0 td>0 td>1 td>0td>tr> 0 td>0 td>0 td>1td>tr>
[a b c d tx ty]

matrix3d()

CSS 函数 matrix3d()用一个 4 × 4 的齐次矩阵来描述一个三维（3D）变换。16个参数都在主要列的顺序中描述。

语法

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

• a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4：以的格式来描述线性变换
• a4 b4 c4：以的格式来描述变换的量

笛卡尔坐标系中用二阶矩阵表示的点坐标	齐次坐标系中用三阶矩阵表示的点坐标	笛卡尔坐标系中用三阶矩阵表示的点坐标	齐次坐标系中用四阶矩阵表示的点坐标
这个变换是属于 3D 空间的，并不适用于这两种情况。	笛卡尔坐标矩阵不允许由一般的三维仿射变换来作为平移，因为平移不是线性变换。	a1 td>a2 td>a3 td>a4td>tr>b1 td>b2 td>b3 td>b4td>tr>table>fenced>ath> c1 td>c2 td>c3 td>c4td>tr> d1 td>d2 td>d3 td>d4td>tr>

perspective()

perspective()这个CSS函数定义了 z=0平面与用户之间的距离，以便给三维定位元素一定透视度。当每个3D元素的z>0时会显得比较大，而在z-sin(a)td>tr>sin(a)td>cos(a)td>tr>table>fenced>ath>

cos(a)td>-sin(a)td>0td>tr>sin(a)td>cos(a)td>0td>tr>0td>0td>1td>tr>table> fenced> ath>cos(a)td>-sin(a)td>0td>tr>sin(a)td>cos(a)td>0td>tr>0td>0td>1td>tr>table> fenced> ath>cos(a)td>-sin(a)td>0td>0td>tr>sin(a)td>cos(a)td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>[cos(a)sin(a)-sin(a)cos(a)0 0]

rotate3d()

rotate3d()这个CSS 函数定义一个3D旋转功能，该旋转使元素能够绕固定轴移动而不变形。其中移动量由指定角度定义；如果为正值，则运动将为顺时针，如果为负值，则为逆时针。

在三维空间中，旋转有三个自由度，各表示某条旋转轴。旋转轴由[x，y，z]向量定义，且过原点（由 transform-origin CSS属性定义）。如果向量没有标准化，即它的三个坐标的平方之和不是1，它将在内部被标准化。不可标准化的向量，如空向量[0,0,0]，将导致旋转不被应用，但不会影响整个CSS属性。

语法

rotate3d(x, y, z, a)

• x：该参数为类型值，描述旋转轴向量的x坐标。
• y：该参数为类型值，描述旋转轴向量的y坐标。
• z：该参数为类型值，描述旋转轴向量的z坐标。
• a：该参数为代表旋转的角度。正角度表示顺时针旋转，负角度表示逆时针旋转。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
这个变换是属于 3D 空间的，并不适用于这两种情况。	1+o>(1-o>cos(ai>))(xi>2n>sup>-o>1)td>zi>·o>sin(ai>)+xi>yi>(1-o>cos(ai>))td>-o>yi>·o>sin(ai>)+o>xi>zi>·o>(1-o>cos(ai>))td>tr>-o>zi>·o>sin(ai>)+o>xi>yi>·o>(1-o>cos(ai>))td>1+(1-cos(a))(y2-1)td>xi>·o>sin(ai>)+o>yi>zi>·o>(1-o>cos(ai>))td>ysin(a)+ xz(1-cos(a))td>-xsin(a)+yz(1-cos(a))td>1+(1-cos(a))(z2-1)td>ttd>tr>0td>0td>0td>1td>tr> tr>table>fenced>ath>

rotateX()

rotateX()这个CSS 函数定义了将元素在横坐标上旋转而不使其变形的方法。其运动的程度由指定的角度来定义；如果是正的，则为顺时针旋转，如果是负的，则是逆时针旋转。

旋转所经过的原点，由 transform-origin CSS属性定义。

rotateX(a)是 rotate3D(1, 0, 0, a)的简写形式。

语法

rotateX()

• ：代表旋转的角度。正角表示顺时针旋转，负角表示逆时针旋转。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
这个变换是属于 3D 空间的，并不适用于这两种情况。	1td>0td>0td>tr>0td>cos(a)td>-sin(a)td>tr>0td>sin(a)td>cos(a)td>tr>table> fenced> ath>	1td>0td>0td>0td>tr>0td>cos(a)td>-sin(a)td>0td>tr>0td>sin(a)td>cos(a)td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

rotateY()

rotateY()这个CSS 函数定义了将元素在纵坐标上旋转而不使其变形的方法。其运动的程度由指定的角度来定义；如果是正的，则为顺时针旋转，如果是负的，则是逆时针旋转。

旋转所经过的原点，由 transform-origin CSS属性定义。

rotateY(a)是 rotate3D(0, 1, 0, a)的简写形式。

语法

rotateY()

• ：代表旋转的角度。正角表示顺时针旋转，负角表示逆时针旋转。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
这个变换是属于 3D 空间的，并不适用于这两种情况。	cos(a)td>0td>sin(a)td>tr>0td>1td>0td>tr>-sin(a)td>0td>cos(a)td>tr>table> fenced> ath>	cos(a)td>0td>sin(a)td>0td>tr>0td>1td>0td>0td>tr>-sin(a)td>0td>cos(a)td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

rotate

rotateZ()这个CSS 函数定义了将元素在z轴上旋转而不使其变形的方法。其运动的程度由指定的角度来定义；如果是正的，则为顺时针旋转，如果是负的，则是逆时针旋转。

旋转所经过的原点，由 transform-origin CSS属性定义。

rotateZ(a)是 rotate3D(0, 0, 1, a)的简写形式。

语法

rotateZ()

• ：代表旋转的角度。正角表示顺时针旋转，负角表示逆时针旋转。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
这个变换是属于 3D 空间的，并不适用于这两种情况。	cos(a)td>-sin(a)td>0td>tr>sin(a)td>cos(a)td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	cos(a)td>-sin(a)td>0td>0td>tr>sin(a)td>cos(a)td>0td>0td>tr>0td>0td>0td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

scale()

The scale()CSS 函数可改变元素的大小。它可以增大或减小元素的大小，并且缩放量由矢量定义，并且它可以使在一个方向上比另一个方向更多。这种变换的特点是矢量的坐标可定义在每个不同方向上各子完成一定比例缩放。如果矢量的两个坐标相等，则缩放是均匀的或各向同性的，并且元素的形状被保留。在这种情况下，缩放函数定义了一个同调变换。

当超出[-1, 1]范围外时，缩放将在坐标方向上放大元素；当在该范围内时，它在该方向收缩元素。当等于1时，它什么也不做，当它为负时，它执行点反射和大小修改。

语法

scale(sx | sx, sy)

• sx：该参数为类型值，代表缩放矢量的横坐标。
• sy：该参数为类型值，代表缩放矢量的纵坐标。如果不存在，则其默认值为 sx，从而导致保持元素形状进行均匀缩放。

scale3d()

scale3d() CSS 函数可改变元素的大小。由于缩放的量由矢量定义，因此可以改变不同方向的尺寸。

这种变换的特点是矢量的坐标定义在每个方向上完成多少缩放。如果矢量的三个坐标都相等，则缩放是均匀的或各向同性的，并且保持元素形状。在这种情况下，这个缩放函数就是定义了一个同调变换。

当超出[-1，1]的范围之外时，缩放比例将在坐标方向上放大元素；当在[-1，1]范围内时，它在当前方向收缩元素。当等于1时，它什么也不做，当它为负时，它执行点反射和大小修改。

语法

scale3d(sx,sy,sz)

参数

sx该参数为的数据值。代表缩放矢量的横坐标。sy该参数为的数据值。代表缩放矢量的纵坐标。sz该参数为的数据值。代表缩放矢量的z轴坐标。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
这个变换是属于 3D 空间的，并不适用于这两种情况。	sx0td>0td>tr>0sytd>0td>tr>0td>0td>sztd>tr>table> fenced> ath>	sx0td>0td>0td>tr>0sytd>0td>0td>tr>0td>0td>sztd>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

scaleX()

scaleX()这个CSS函数是用一个常数因子来修改每个单元点的横坐标，在比例因子是1的情况下该函数是恒等变换。缩放不是各向同性的，元素的角度也不守恒。

scaleX(sx)是scale(sx, 1)和scale3d(sx, 1, 1)的简写形式。

scaleX(-1)表示通过原点的垂直轴定义轴对称（由属性指定）。

语法

scaleX(s)

参数

s该参数为的数据值。表示在元素的每个点的横坐标上应用的缩放因子。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
std>0td>tr>0td>1td>tr> table> fenced> ath>	s0td>0td>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	s0td>0td>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	s0td>0td>0td>tr>01td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[s 0 0 1 0 0]

scaleY()

scaleY()这个 CSS函数用一个常数因子修改每个元素点的纵坐标，在比例因子是1的情况下该函数是恒等变换。缩放不是各向同性的，元素的角度不守恒。

scaleY(sy)是scale(1, sy)和scale3d(1, sy, 1)的简写形式。

scaleY(-1)定义了通过原点的水平轴的轴对称（由属性指定）。

语法

scaleY(s)

参数

s该参数为的数据值。表示在元素的每个点的纵坐标上应用的缩放因子。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
10td>tr>0td>std>tr> table> fenced> ath>	10td>0td>tr>0std>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>tr>0std>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>0td>tr>0std>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 0 s 0 0]

scaleZ()

scaleZ()这个CSS函数是用一个常数因子来修改每个单元点的z轴坐标，在比例因子是1的情况下该函数是恒等变换。缩放不是各向同性的，元素的角度也不守恒。

scaleZ(sz)是scale3d(1, 1, sz)的简写形式。

scaleZ(-1)定义了通过原点的z轴的轴对称（由属性指定）。

语法

scaleZ(s)

参数

s该参数为的数据值。表示在元素的每个点的z轴坐标上应用的缩放因子。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
这个变换是属于 3D 空间的，并不适用于这两种情况。	10td>0td>tr>01td>0td>tr>0td>0td>std>tr>table> fenced> ath>	10td>0td>0td>tr>01td>0td>0td>tr>0td>0td>std>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

skew()

skew()这个CSS函数是一种用于拉伸，或者说是平移，该函数会使得在每个方向上扭曲元素上的每个点以一定角度。这是通过将每个坐标增加一个与指定角度成比例的值和到原点的距离来完成的。离原点越远，拉伸的值就越大。

语法

skew(ax)

skew(ax, ay)

参数

ax该参数为一个角度，表示用于沿着横坐标扭曲元素的角度。ay该参数为一个角度，表示用于沿纵坐标扭曲元素的角度。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
1tan(ax)td>tr>tan(ay)1td>tr>table> fenced> ath>	1tan(ax)td>0td>tr>tan(ay)1td>0td>tr>0td>0td>1td>tr>tr>table> fenced> ath>	1tan(ax)td>0td>tr>tan(ay)1td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	1tan(ax)td>0td>0td>tr>tan(ay)1td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 tan(ay)tan(ax)1 0 0]

skewX()

skewX()这个CSS函数是用于水平拉伸，它将元素的每个点在水平方向上扭曲一定角度。这是通过将横坐标增加一个与指定角度成比例的值以及到原点的距离来完成的。离原点越远，拉伸的值就越大。

语法

skewX(a)

参数

a该参数为一个角度，表示用于沿着横坐标扭曲元素的角度。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
1tan(ay)td>tr>01td>tr>table> fenced> ath>	1tan(ay)td>0td>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	1tan(ay)td>0td>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	1tan(ay)td>0td>0td>tr>01td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 tan(a)1 0 0]

skewY()

skewY()这个CSS函数是用于垂直拉伸，它将元素的每个点在垂直方向上扭曲一定角度。这是通过将纵坐标增加一个与指定角度成比例的值以及到原点的距离来完成的。离原点越远，拉伸的值就越大。

语法

skewY(a)

参数

a该参数为一个角度，表示用于沿着纵坐标扭曲元素的角度。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
10td>tr>tan(ax)1td>tr>table> fenced> ath>	10td>0td>tr>tan(ax)1td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>tr>tan(ax)1td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>0td>tr>tan(ax)1td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 tan(a)0 1 0 0]

translate()

translate()这个CSS 函数用于移动元素在平面上的位置。这种变换的特点是矢量的坐标定义了它在每个方向上的移动量。

语法

translate(tx)

translate(tx, ty)

参数

tx该参数为，表示要移动矢量的横坐标。ty该参数为，表示要移动矢量的纵坐标。如果不写则默认为零，例如translate(2)表示translate(2, 0)。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
平移不是ℝ2中的线性变换，不能用笛卡尔坐标系中的矩阵表示。	10td>txtd>tr>01td>tytd>tr>0td>0td>1td>tr>table> fenced> ath>	10td>txtd>tr>01td>tytd>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>txtd>tr>01td>0td>tytd>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 0 1 tx ty]

translate3d()

translate3d()这个CSS 函数用于移动元素在3D空间中的位置。这种变换的特点是三维矢量的坐标定义了它在每个方向上的移动量。

语法

translate3d(tx, ty, tz)

参数

tx该参数为，代表移动矢量的横坐标。ty该参数为，代表移动矢量的纵坐标。tz该参数为代表移动矢量的z轴坐标。该值不能使用百分比；如果使用会被认为是无效属性。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
这个变换是属于 3D 空间的，并不适用于这两种情况。	平移不是ℝ3中的线性变换，不能用笛卡尔坐标系中的矩阵表示。	10td>0td>txtd>tr>01td>0td>tytd>tr>0td>0td>1td>tztd>tr>0td>0td>0td>1td>tr>table> fenced> ath>

translateX()

translateX()这个CSS 函数用于在平面上水平移动元素。这个转换的特点是定义了它的水平移动量。

translateX(tx)是translate(tx, 0)的简写形式。

语法

translateX(t)

参数

t该参数为，代表移动矢量的横坐标。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.	10td>ttd>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>ttd>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>ttd>tr>01td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 0 1 t 0]

translateY()

translateY()这个CSS 函数用于在平面上垂直移动元素。这个转换的特点是通过定义了它的垂直移动量。

translateY(ty)是translate(0, ty)的简写形式。

语法

translateY(t)

参数

t该参数为代表移动矢量的横坐标。该参数不能使用百分比；如果使用百分比形式，会被认为是无效参数。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.	10td>0td>tr>01td>ttd>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>tr>01td>ttd>tr>0td>0td>1td>tr>table> fenced> ath>ath>	10td>0td>0td>tr>01td>0td>ttd>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 0 1 0 t]

translateZ()

translateZ()这个CSS 函数用于3D空间的z轴方向移动元素，这个转换的特点是通过定义了它的z轴方向移动量。

translateZ(tz)是translate3d(0, 0, tz)的简写形式。

语法

translateZ(t)

参数

t该参数为，代表移动矢量的z轴坐标。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
这个变换是属于 3D 空间的，并不适用于这两种情况。	A translation is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system.	10td>0td>0td>tr>01td>0td>0td>tr>0td>0td>1td>ttd>tr>0td>0td>0td>1td>tr>table> fenced> ath>

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com