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