html5transform变形,transform-function

transform-function

规定一个为了改变元素显示效果而应用到该元素上的函数，这些变换函数通常代表一类矩阵，最终如何显示出来决定于这些函数矩阵和元素每个点相乘的结果。

列表

值描述

none规定不进行转换。

规定 2D 转换，使用六个值的矩阵。

规定 3D 转换，使用 16 个值的 4×4 矩阵。

规定平面(2D)上移动的元素的位置。这种转换的特点是坐标值定义多少它就在这个方向上移动。

规定转换，只适用 X 轴的值。

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

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

规定 2D 缩放转换。

规定 3D 缩放转换。

通过设置 X 轴的值来定义缩放转换。

通过设置 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描述矢量表示旋转轴的 x 坐标。

y描述矢量表示旋转轴的 y 坐标。

z描述矢量表示旋转轴的 z 坐标。

angle代表旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。

translateX()

规定转换，只适用 X 轴的值。

语法

translateX(t)

值

值描述

tIs a representing the abscissa of the translating vector。

translateY()

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

语法

translateY(t)

值

值描述

tIs a representing the abscissa of the translating vector。

translateZ()

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

语法

translateZ(t)

值

值描述

tIs a 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代表旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。

rotate3d()

规定3D 旋转。

语法

rotate3d(x,y,z,angle)

值

值描述

x规定 x 坐标数。

y规定 y 坐标数。

z规定 z 坐标数。

angle规定旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。

rotateX()

规定沿着 X 轴的 3D 旋转。

语法

rotateX(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是给距离从用户到 z = 0 平面。它用来应用于元素的透视变换。如果它是 0 或负值，则应用没有透视变换。