transform-function

<transform-function> CSS数据类型表示应用到一个该元素上的一个函数，以便修改它。通常，这种变换可以由矩阵表示，并且可以使用每个点上的矩阵乘法来确定所得到的图像。

2D图形的坐标系统

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

笛卡尔坐标

在笛卡尔坐标系中，每个点都由横坐标和纵坐标这两个值来确定。原点(0,0)在元素的左上角。不同于通常的几何约定，y轴是向底部延伸的，这与多数情况下的计算机图形学是一致的。每个点都使用数学上的向量符号(x,y)来描述。

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

$(\begin{matrix} \end{matrix})$ a c
b d $(\begin{matrix} \end{matrix})$

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

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

根据这个描述就可以组合多种变换如：旋转、缩放、拉伸。事实上，所有的变换都可以被描述为一个线性函数。组合的变换是从右到左生效的。然而有一种变换不是线性的所以必须被单独列出来，那就是：位移。位移的向量（tx, ty）必须被单独表示为两个额外的参数。

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

Coordinates for 3D graphics

Functions defining transformations

`matrix()`

The matrix() CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.

matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Note: Until Firefox 16, Gecko accepted a <length> value for tx and ty.

Syntax

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

Values

a b c d: Are <number> describing the linear transformation.
tx ty: Are <number> describing the translation to apply.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} a & c \\ b & d \end{matrix})$	$(\begin{matrix} a & c & ty \\ b & d & tx \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} a & c & ty \\ b & d & tx \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} a & c \\ b & d \end{matrix})$	`[a b c d tx ty]`

`matrix3d()`

The matrix3d() CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.

Note: Until Firefox 16, Gecko accepted a <length> value for a4, b4 and c4.

Syntax

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

Values

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4: Are <number> describing the linear transformation.
a4 b4 c4: Are <number> describing the translation to apply.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plan.		Cartesian-coordinate matrix doesn't allow to represent a generic 3d affine transforms as translations are not linear transforms.	$(\begin{matrix} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \end{matrix})$

`perspective()`

The perspective() CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

Syntax

perspective(l)

Values

l: Is a <length> giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the element. If it is 0 or a negative value, no perspective transform is applied.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plan.		A perspective is not a linear transform in ℝ³ and cannot be represented using a matrix in the Cartesian coordinates system.	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & - 1 / d & 1 \end{matrix})$

`rotate()`

The rotate() CSS function defines a transformation that moves the element around a fixed point (as specified by the transform-origin property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.

Syntax

rotate(a)

Values

a: Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} cos(a) & -sin(a) \\ sin(a) & cos(a) \end{matrix})$	$(\begin{matrix} cos(a) & -sin(a) & 0 \\ sin(a) & cos(a) & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} cos(a) & -sin(a) & 0 \\ sin(a) & cos(a) & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} cos(a) & -sin(a) & 0 & 0 \\ sin(a) & cos(a) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[cos(a)` sin(a) `-sin(a) cos(a) 0 0]`

`rotate3d()`

The rotate3d()CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

In the 3D space, rotations have three degrees of liberty, describing an axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the transform-origin CSS property. If the vector is not normalized, that is the sum of the square of its three coordinates is not 1, it will be normalized internally. A non-normalizable vector, like the null vector, [0, 0, 0], will cause the rotation not to be applied, without invaliding the whole CSS property.

In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.

Syntax

rotate3d(x, y, z, a)

Values

x: Is a <number> describing the x-coordinate of the vector denoting the axis of rotation.
y: Is a <number> describing the y-coordinate of the vector denoting the axis of rotation.
z: Is a <number> describing the z-coordinate of the vector denoting the axis of rotation.
a: Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		$(\begin{matrix} 1 + (1 - cos(a))(x^{2} - 1) & z \cdot sin(a)+ x y (1 - cos(a)) & - y \cdot sin(a) + x z \cdot (1 - cos(a)) \\ - z \cdot sin(a) + x y \cdot (1 - cos(a)) & 1+(1-cos(a))(y2-1) & x \cdot sin(a) + y z \cdot (1 - cos(a)) & ysin(a) + xz(1-cos(a)) & -xsin(a)+yz(1-cos(a)) & 1+(1-cos(a))(z2-1) & t & 0 & 0 & 0 & 1 \end{matrix})$

`rotateX()`

The rotateX()CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

The axis of rotation passes by the origin, defined by transform-origin CSS property.

rotateX(a)is a shorthand for rotate3D(1, 0, 0, a).

In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.

Syntax

rotateX(a)

Values

a: Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		$(\begin{matrix} 1 & 0 & 0 \\ 0 & cos(a) & -sin(a) \\ 0 & sin(a) & cos(a) \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & cos(a) & -sin(a) & 0 \\ 0 & sin(a) & cos(a) & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

`rotateY()`

The rotateY()CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

The axis of rotation passes by the origin, defined by transform-origin CSS property.

rotateY(a)is a shorthand for rotate3D(0, 1, 0, a).

In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.

Syntax

rotateY(a)

Values

a: Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		$(\begin{matrix} cos(a) & 0 & sin(a) \\ 0 & 1 & 0 \\ -sin(a) & 0 & cos(a) \end{matrix})$	$(\begin{matrix} cos(a) & 0 & sin(a) & 0 \\ 0 & 1 & 0 & 0 \\ -sin(a) & 0 & cos(a) & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

`rotateZ()`

The rotateZ()CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

The axis of rotation passes by the origin, defined by transform-origin CSS property.

rotateZ(a)is a shorthand for rotate3D(0, 0, 1, a).

In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.

Syntax

rotateZ(a)

Values

a: Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		$(\begin{matrix} cos(a) & -sin(a) & 0 \\ sin(a) & cos(a) & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} cos(a) & -sin(a) & 0 & 0 \\ sin(a) & cos(a) & 0 & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

`scale()`

The scale() CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one.

This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.

When outside the ]-1, 1[ range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to 1 it does nothing and when negative it performs a point reflection and the size modification.

The scale() function only applies the transformation in the Euclidian plane (in 2D). To scale in the space, the scale3D() function has to be used.

Syntax

scale(sx) or
scale(sx, sy)

Values

sx: Is a <number> representing the abscissa of the scaling vector.
sy: Is a <number> representing the ordinate of the scaling vector. If not present, its default value is sx, leading to a uniform scaling preserving the shape of the element.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} sx & 0 \\ 0 & sy \end{matrix})$	$(\begin{matrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} sx & 0 \\ 0 & sy \end{matrix})$	`[sx 0 0 sy 0 0]`

`scale3d()`

The scale3d() CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.

This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.

When outside the [-1, 1] range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to 1 it does nothing and when negative it performs a point reflection and the size modification.

Syntax

scale3d(sx, sy, sz)

Values

sx: Is a <number> representing the abscissa of the scaling vector.
sy: Is a <number> representing the ordinate of the scaling vector.
sz: Is a <number> representing the z-component of the scaling vector.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		$(\begin{matrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & sz \end{matrix})$	$(\begin{matrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

`scaleX()`

The scaleX() CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.

scaleX(sx) is a shorthand for scale(sx, 1) or for scale3d(sx, 1, 1).

scaleX(-1) defines an axial symmetry with a vertical axis passing by the origin (as specified by the transform-origin property).

Syntax

scaleX(s)

Values

s: Is a <number> representing the scaling factor to apply on the abscissa of each point of the element.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} s & 0 \\ 0 & 1 \end{matrix})$	$(\begin{matrix} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} s & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} s & 0 \\ 0 & 1 \end{matrix})$	`[s 0 0 1 0 0]`

`scaleY()`

The scaleY() CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.

scaleY(sy) is a shorthand for scale(1, sy) or for scale3d(1, sy, 1).

scaleY(-1) defines an axial symmetry with a horizontal axis passing by the origin (as specified by the transform-origin property).

Syntax

scaleY(s)

Values

s: Is a <number> representing the scaling factor to apply on the ordinate of each point of the element.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} 1 & 0 \\ 0 & s \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & s & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & s & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & s & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & 0 \\ 0 & s \end{matrix})$	`[1 0 0 s 0 0]`

`scaleZ()`

The scaleZ() CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.

scaleZ(sz) is a shorthand for scale3d(1, 1, sz).

scaleZ(-1) defines an axial symmetry along the z-axis passing by the origin (as specified by the transform-origin property).

Syntax

scaleZ(s)

Values

s: Is a <number> representing the scaling factor to apply on the z-coordinate of each point of the element.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & s \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & s & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

`skew()`

The skew() CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.

Syntax

skew(ax)       or
skew(ax, ay)

Values

ax: Is an <angle> representing the angle to use to distort the element along the abscissa.
ay: Is an <angle> representing the angle to use to distort the element along the ordinate.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} 1 & tan(ax) \\ tan(ay) & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 \\ tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 \\ tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 & 0 \\ tan(ay) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & tan(ax) \\ tan(ay) & 1 \end{matrix})$	`[1 tan(ay) tan(ax) 1 0 0]`

`skewX()`

The skewX() CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.

Syntax

skewX(a)

Values

a: Is an <angle> representing the angle to use to distort the element along the abscissa.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} 1 & tan(ay) \\ 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ay) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ay) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ay) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & tan(ay) \\ 0 & 1 \end{matrix})$	`[1 0 tan(a) 1 0 0]`

`skewY()`

The skewY() CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.

Syntax

skewY(a)

Values

a: Is an <angle> representing the angle to use to distort the element along the ordinate.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} 1 & 0 \\ tan(ax) & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ tan(ax) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ tan(ax) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ tan(ax) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & 0 \\ tan(ax) & 1 \end{matrix})$	`[1 tan(a) 0 1 0 0]`

`translate()`

The translate() CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.

Syntax

translate(tx)       or
translate(tx, ty)

Values

tx: Is a <length> representing the abscissa of the translating vector.
ty: Is a <length> representing the ordinate of the translating vector. If missing, it is assumed to be equals to tx : translate(2) means translate(2, 2).

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
A translation is not a linear transform in ℝ² and cannot be represented using a matrix in the cartesian coordinates system.	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 tx ty]`

`translate3d()`

The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.

Syntax

translate3d(tx, ty, tz)

Values

tx: Is a <length> representing the abscissa of the translating vector.
ty: Is a <length> representing the ordinate of the translating vector.
tz: Is a <length> representing the z component of the translating vector. It can't be a <percentage> value; in that case the property containing the transform is considered invalid.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		A translation is not a linear transform in ℝ³ and cannot be represented using a matrix in the Cartesian coordinates system.	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{matrix})$

`translateX()`

The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a <length> defining how much it moves horizontally.

translateX(tx) is a shortcut for translate(tx, 0).

Syntax

translateX(t)

Values

t: Is a <length> representing the abscissa of the translating vector.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
A translation is not a linear transform in ℝ² and cannot be represented using a matrix in the cartesian coordinates system.	$(\begin{matrix} 1 & 0 & t \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & t \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & t \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 t 0]`

`translateY()`

The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a <length> defining how much it moves vertically.

translateY(ty) is a shortcut for translate(0, ty).

Syntax

translateY(t)

Values

t: Is a <length> representing the z-component of the translating vector. It can't be a <percentage> value; in that case the property containing the transform is considered invalid.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
A translation is not a linear transform in ℝ² and cannot be represented using a matrix in the cartesian coordinates system.	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & t \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 0 t]`

`translateZ()`

The translateZ() CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a <length> defining how much it moves.

translateZ(tz) is a shorthand for translate3d(0, 0, tz).

Syntax

translateZ(t)

Values

t: Is a <length> representing the ordinate of the translating vector.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		A translation is not a linear transform in ℝ³ and cannot be represented using a matrix in the Cartesian coordinates system.	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & t \\ 0 & 0 & 0 & 1 \end{matrix})$

2D图形 的坐标系统

笛卡尔 坐标

Coordinates for 3D graphics

Functions defining transformations

matrix()

Syntax

Values

matrix3d()

Syntax

Values

perspective()

Syntax

Values

rotate()

Syntax

Values

rotate3d()

Syntax

Values

rotateX()

Syntax

Values

rotateY()

Syntax

Values

rotateZ()

Syntax

Values

scale()

Syntax

Values

scale3d()

Syntax

Values

scaleX()

Syntax

Values

scaleY()

Syntax

Values

scaleZ()

Syntax

Values

skew()

Syntax

Values

skewX()

Syntax

Values

skewY()

Syntax

Values

translate()

Syntax

Values

translate3d()

Syntax

Values

translateX()

Syntax

Values

translateY()

Syntax

Values

translateZ()

Syntax

Values

文档标签和贡献者

2D图形的坐标系统

笛卡尔坐标

`matrix()`

`matrix3d()`

`perspective()`

`rotate()`

`rotate3d()`

`rotateX()`

`rotateY()`

`rotateZ()`

`scale()`

`scale3d()`

`scaleX()`

`scaleY()`

`scaleZ()`

`skew()`

`skewX()`

`skewY()`

`translate()`

`translate3d()`

`translateX()`

`translateY()`

`translateZ()`