目录

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)

描述
tIs a <length> representing the abscissa of the translating vector。

translateY()

规定转换,只适用 Y 轴的值。

语法

translateY(t)

描述
tIs a <length> representing the abscissa of the translating vector。

translateZ()

规定 3D 转换,只适用 Z 轴的值。

语法

translateZ(t)

描述
tIs 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 或负值,则应用没有透视变换。