transform-function
规定一个为了改变元素显示效果而应用到该元素上的函数，这些变换函数通常代表一类矩阵，最终如何显示出来决定于这些函数矩阵和元素每个点相乘的结果。
列表
| 值 | 描述 |
|---|---|
| none | 规定不进行转换。 |
| matrix() | 规定 2D 转换，使用六个值的矩阵。 |
| matrix3d() | 规定 3D 转换，使用 16 个值的 4×4 矩阵。 |
| translate() | 规定平面(2D)上移动的元素的位置。这种转换的特点是坐标值定义多少它就在这个方向上移动。 |
| translate3d() | 规定 3D 转换。 |
| translateX() | 规定转换，只适用 X 轴的值。 |
| translateY() | 规定转换，只适用 Y 轴的值。 |
| translateZ() | 规定 3D 转换，只适用 Z 轴的值。 |
| scale() | 规定 2D 缩放转换。 |
| scale3d() | 规定 3D 缩放转换。 |
| scaleX() | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY() | 通过设置 Y 轴的值来定义缩放转换。 |
matrix()
规定 2D 转换，使用六个值的矩阵。
语法
matrix(a, b, c, d, tx, ty)
值
| 值 | 描述 |
|---|---|
| a、b、c | 规定线性转换的数。 |
| tx、ty | 基于 X 和 Y 坐标重新定位元素数。 |
matrix3d()
规定 3D 转换，使用 16 个值的 4×4 矩阵。
语法
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、d4 | 规定线性转换的数字。 |
| a4、b4、c4 | 基于 X 和 Y 坐标重新定位元素数。 |
translate()
规定平面(2D)上移动的元素的位置。这种转换的特点是坐标值定义多少它就在这个方向上移动。
语法
translate(tx) translate(tx, ty)
值
| 值 | 描述 |
|---|---|
| tx | 规定转换 x 坐标的数。 |
| ty | 规定转换 y 坐标数。如果没有，这个值等于tx：translate(2) 等于 translate(2, 2)。 |
translate3d()
规定 3D 缩放转换。
语法
rotate3d(x, y, z, angle)
值
| 值 | 描述 |
|---|---|
| x | <number>描述矢量表示旋转轴的 x 坐标。 |
| y | <number>描述矢量表示旋转轴的 y 坐标。 |
| z | <number>描述矢量表示旋转轴的 z 坐标。 |
| angle | <angle>代表旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。 |
translateX()
规定转换，只适用 X 轴的值。
语法
translateX(t)
值
| 值 | 描述 |
|---|---|
| t | Is a <length> representing the abscissa of the translating vector。 |
translateY()
规定转换，只适用 Y 轴的值。
语法
translateY(t)
值
| 值 | 描述 |
|---|---|
| t | Is a <length> representing the abscissa of the translating vector。 |
translateZ()
规定 3D 转换，只适用 Z 轴的值。
语法
translateZ(t)
值
| 值 | 描述 |
|---|---|
| t | Is a <length> representing the abscissa of the translating vector。 |
scale()
规定 2D 缩放转换。
语法
scale(x) scale(x, y)
值
| 值 | 描述 |
|---|---|
| x | 规定缩放 x 坐标的数。 |
| y | 规定缩放 y 坐标的数。 |
scale3d()
规定 3D 缩放转换。
语法
scale3d(x, y, z)
值
| 值 | 描述 |
|---|---|
| x | 规定缩放 x 坐标的数。 |
| y | 规定缩放 y 坐标的数。 |
| z | 规定缩放 z 坐标的数。 |
scaleX()
通过设置 X 轴的值来定义缩放转换。
语法
scaleX(x)
值
| 值 | 描述 |
|---|---|
| x | 规定缩放 x 坐标的数。 |
scaleY()
通过设置 Y 轴的值来定义缩放转换。
语法
scaleY(y)
值
| 值 | 描述 |
|---|---|
| y | 规定缩放 y 坐标的数。 |
scaleZ()
通过设置 Z 轴的值来定义 3D 缩放转换。
语法
scaleZ(z)
值
| 值 | 描述 |
|---|---|
| z | 规定缩放 z 坐标的数。 |
rotate()
规定 2D 旋转，在参数中规定角度。
语法
rotate(angle)
值
| 值 | 描述 |
|---|---|
| angle | <angle>代表旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。 |
rotate3d()
规定3D 旋转。
语法
rotate3d(x,y,z,angle)
值
| 值 | 描述 |
|---|---|
| x | 规定 x 坐标数。 |
| y | 规定 y 坐标数。 |
| z | 规定 z 坐标数。 |
| angle | 规定旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。 |
rotateX()
规定沿着 X 轴的 3D 旋转。
语法
rotateX(angle)
值
| 值 | 描述 |
|---|---|
| angle | <angle>代表旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。 |
rotateY()
规定沿着 Y 轴的 3D 旋转。
语法
rotateY(angle)
值
| 值 | 描述 |
|---|---|
| angle | 规定旋转的角度。正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。 |
rotateZ()
规定沿着 Z 轴的 3D 旋转。
语法
rotateZ(angle)
值
| 值 | 描述 |
|---|---|
| angle | 规定旋转的角度。正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。 |
skew()
规定沿着 X 和 Y 轴的 2D 倾斜转换。
语法
skew(x-angle) skew(x-angle,y-angle)
值
| 值 | 描述 |
|---|---|
| x-angle | 规定沿着 x 坐标的倾斜角度。 |
| y-angle | 规定沿着 y 坐标的倾斜角度。 |
skewX()
规定沿着 X 轴的 2D 倾斜转换。
语法
skewX(angle)
值
| 值 | 描述 |
|---|---|
| angle | 规定倾斜角度。 |
skewY()
规定沿着 Y 轴的 2D 倾斜转换。
语法
skewX(angle)
值
| 值 | 描述 |
|---|---|
| angle | 规定倾斜角度。 |
perspective()
为 3D 转换元素定义透视视图。
语法
perspective(n)
值
| 值 | 描述 |
|---|---|
| n | 是<length>给距离从用户到 z = 0 平面。它用来应用于元素的透视变换。如果它是 0 或负值，则应用没有透视变换。 |