transform-function

  • Revision slug: CSS/transform-function
  • Revision title: transform-function
  • Revision id: 310357
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ draft() }}

The <transform-function> CSS data type denotes a function to apply to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point.

Coordinates for 2D graphics

There are several coordinates model used when describing transformation. The most usual are the Cartesian coordinates and the homogenous coordinates.

Cartesian coordinates

coord_in_R2.png

In Cartesian coordinates each point of the Euclidian space is described using two values, the abscissa and the ordinate. The origin, the (0, 0)  is the top-left corner of the element. Unlike the usual geometric convention, and like most case in computer graphics, the y-axis goes to the bottom. Each point is mathematically described using the vector notation (x,y).

Each linear function is described using a 2x2 matrix like:

ac bd

Applying the transformation consists in doing, for each point, the matrix multiplication between both:

transform_functions_generic_transformation_cart.png.

It is possible to apply several transformation in a raw:

transform_functions_transform_composition_cart.png.

With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling or skewing. In fact all transformations that are linear functions can be describes. One major transformations is not linear and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two more parameters.

Möbius' homogenous coordinates in projective geometry

leading to 3x3 transformation matrices, though more complex and unusual for non-specialist, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need of special cases

Coordinates for 3D graphics

Functions defining transformations

matrix()

The matrix() CSS function specifies an 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: Gecko (Firefox) accepts a {{ xref_csslength() }} value for tx and ty.
Webkit (Safari, Chrome) and Opera currently support a unitless {{ xref_cssnumber() }} for tx and ty.

Syntax

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

where :

a b c d
Are {{ xref_cssnumber() }} describing the linear transformation.
tx ty
Are {{ xref_csslength() }} describing the translation to apply.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
ac bd actybdtx001 actybdtx001 ac0txbd0ty00100001
[a b c d tx ty]

matrix3d()

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

Syntax

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

where :

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4
Are {{ xref_cssnumber() }} describing the linear transformation.
a4 b4 c4
Are {{ xref_csslength() }} describing the translation to apply.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
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. a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4

rotate()

transform-functions-rotate_19.5.pngThe rotate() CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("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)

where :

a
Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
cos(a)sin(a) -sin(a)cos(a)  cos(a)sin(a)0-sin(a)cos(a)0001  cos(a)sin(a)0-sin(a)cos(a)0001  cos(a)sin(a)00-sin(a)cos(a)0000100001
[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 axe 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 a [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("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)

where :

x
Is a {{ xref_cssnumber() }} describing the x-coordinate of the vector denoting the axis of rotation.
y
Is a {{ xref_cssnumber() }} describing the y-coordinate of the vector denoting the axis of rotation.
z
Is a {{ xref_cssnumber() }} describing the z-coordinate of the vector denoting the axis of rotation.
a
Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plan. transform-functions-rotate3d_cart.png transform-functions-rotate3d_hom4.png

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 {{ cssxref("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)

where :

a
Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plan. 1000cos(a)sin(a)0-sin(a)cos(a) 10000cos(a)sin(a)00-sin(a)cos(a)00001

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 {{ cssxref("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)

where :

a
Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plan. cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001

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 {{ cssxref("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)

where :

a
Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plan. cos(a)sin(a)0-sin(a)cos(a)0001 cos(a)sin(a)00-sin(a)cos(a)0000000001

scale()

transform-functions-scale_2_2.png

The scale() CSS function modify the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, if 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 equals, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines an 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 equals 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)

where :

sx
Is a {{ xref_cssnumber() }} representing the abscissa of the scaling vector.
sy
Is a {{ xref_cssnumber() }} 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 ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]

scale3d()

The scale3d() CSS function modify the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, if 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 all three coordinates of the vector are equals, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines an 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 equals to 1 it does nothing and when negative it performs a point reflection and the size modification.

Syntax

scale3d(sx, sy, sz)

where :

sx
Is a {{ xref_cssnumber() }} representing the abscissa of the scaling vector.
sy
Is a {{ xref_cssnumber() }} representing the ordinate of the scaling vector.
sz
Is a {{ xref_cssnumber() }} representing the z-component of the scaling vector.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plan. sx000sy000sz sx0000sy0000sz00001
 

scaleX()

transform-functions-scaleX_2.pngThe scaleX() CSS function modify 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)

where :

s
Is a {{ xref_cssnumber() }} representing the scaling factor to apply on the abscissa of each point of the element.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]

scaleY()

transform-functions-scaleY_2.png

The scaleY() CSS function modify 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 an horizontal axis passing by the origin (as specified by the transform-origin property).

Syntax

scaleY(s)

where :

s
Is a {{ xref_cssnumber() }} representing the scaling factor to apply on the ordinate of each point of the element.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
 10 0s 1000s0001 1000s0001 10000s0000100001
[1 0 0 s 0 0]

scaleZ()

The scaleZ() CSS function modify 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)

where :

s
Is a {{ xref_cssnumber() }} representing the scaling factor to apply on the z-coordinate of each point of the element.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plan. 10001000s 1000010000s00001
 

skew()

{{ non-standard_header() }}

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.

Note: The skew() function was present in early drafts. It has been removed and is still present in some prefixed implementations. Do not use it.

To achieve the same effect, use skewX() if you were using skew() with one parameter or matrix(1, tan(ax), tan(ay), 1, 0, 0) for the general way. Note that tan() isn't a CSS function and you have to precalculate it yourself.

Syntax

skew(ax)       or
skew(ax, ay)

where :

ax
Is an {{ xref_cssangle() }} representing the angle to use to distort the element along the abscissa.
ay
Is an {{ xref_cssangle() }} representing the angle to use to distort the element along the ordinate.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
      1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]

skewX()

The skewX() CSS function is an 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)

where :

a
Is an {{ xref_cssangle() }} representing the angle to use to distort the element along the abscissa.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
      1tan(ay)00010000100001
[1 0 tan(a) 1 0 0]

skewY()

The skewY() CSS function is an 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)

where :

a
Is an {{ xref_cssangle() }} representing the angle to use to distort the element along the ordinate.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
      1000tan(ax)10000100001
[1 tan(a) 0 1 0 0]

translate()

transform-functions-translate_2.pngThe 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)

where :

tx
Is a {{ xref_csslength() }} representing the abscissa of the translating vector.
ty
Is a {{ xref_csslength() }} representing the ordinate of the translating vector. If missing, it is assumed to be equals to txtranslate(2) means translate(2, 2).
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3

A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

10tx01ty001 10tx01ty001 100tx010ty00100001
[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)

where :

tx
Is a {{ xref_csslength() }} representing the abscissa of the translating vector.
ty
Is a {{ xref_csslength() }} representing the ordinate of the translating vector.
tz
Is a {{ xref_csslength() }} representing the z component of the translating vector. It can't be a {{ xref_csspercentage() }} value; in that case the property containing the transform is considered invalid.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3

This transform applies to the 3D space and cannot be represented on the plan.

A translation is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 100tx010ty001tz0001

translateX()

transform-functions-translateX_2.pngThe translateX() CSS function moves horizontally the element on the plane. This transformation is characterized by a {{ xref_csslength() }} defining how much it moves horizontally.

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

Syntax

translateX(t)

where :

t
Is a {{ xref_csslength() }} representing the abscissa of the translating vector.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3

A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]

translateY()

transform-functions-translateY_2.pngThe translateY() CSS function moves vertically the element on the plane. This transformation is characterized by a {{ xref_csslength() }} defining how much it moves vertically.

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

Syntax

translateY(t)

where :

t
Is a {{ xref_csslength() }} representing the z-component of the translating vector. It can't be a {{ xref_csspercentage() }} value; in that case the property containing the transform is considered invalid.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3

A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

10001t001 10001t001 1000010t00100001
[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 {{ xref_csslength() }} defining how much it moves.

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

Syntax

translateZ(t)

where :

t
Is a {{ xref_csslength() }} representing the ordinate of the translating vector.
Cartesian coordinates on ℝ2 Homogenous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogenous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plan. A translation is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 10000100001t0001
 

 

Revision Source

<p>{{ draft() }}</p>
<p>The <code>&lt;transform-function&gt;</code> CSS data type denotes a function to apply to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point.</p>
<h2 id="Coordinates_for_2D_graphics">Coordinates for 2D graphics</h2>
<p>There are several coordinates model used when describing transformation. The most usual are the Cartesian coordinates and the homogenous coordinates.</p>
<h3 id="Cartesian_coordinates"><span class="external">Cartesian coordinates</span></h3>
<p><a href="/@api/deki/files/5796/=coord_in_R2.png" title="coord_in_R2.png"><img alt="coord_in_R2.png" class="internal rwrap" src="/files/3438/coord_in_R2.png" style="width: 171px; height: 183px; float: right;" /></a></p>
<p>In <a class="external" href="http://en.wikipedia.org/wiki/Cartesian_coordinate_system" title="http://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinates</a> each point of the <a class="external" href="http://en.wikipedia.org/wiki/Euclidean_geometry" title="http://en.wikipedia.org/wiki/Euclidean_geometry">Euclidian space</a> is described using two values, the abscissa and the ordinate. The origin, the <code>(0, 0)</code>&nbsp; is the top-left corner of the element. Unlike the usual geometric convention, and like most case in computer graphics, the y-axis goes to the bottom. Each point is mathematically described using the vector notation <code>(x,y)</code>.</p>
<p>Each linear function is described using a 2x2 matrix like:</p>
<div style="text-align: center;">
  <p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
</div>
<p>Applying the transformation consists in doing, for each point, the matrix multiplication between both:</p>
<div style="text-align: center;">
  <a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png" title="transform_functions_generic_transformation_cart.png"><img alt="transform_functions_generic_transformation_cart.png" class="internal default" src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="width: 189px; height: 32px;" /></a>.</div>
<p>It is possible to apply several transformation in a raw:</p>
<div style="text-align: center;">
  <a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png" title="transform_functions_transform_composition_cart.png"><img alt="transform_functions_transform_composition_cart.png" class="internal default" src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="width: 313px; height: 32px;" /></a>.</div>
<p>With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling or skewing. In fact all transformations that are linear functions can be describes. One major transformations is not linear and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two more parameters.</p>
<h3 id="M.C3.B6bius'_homogenous_coordinates_in_projective_geometry"><a class="external" href="http://en.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius" title="http://en.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Möbius</a>' <a class="external" href="http://en.wikipedia.org/wiki/Homogeneous_coordinates" title="http://en.wikipedia.org/wiki/Homogeneous_coordinates">homogenous coordinates</a> in <a class="external" href="http://en.wikipedia.org/wiki/Projective_geometry" title="http://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a></h3>
<p>leading to 3x3 transformation matrices, though more complex and unusual for non-specialist, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need of special cases</p>
<h2 id="Coordinates_for_3D_graphics">Coordinates for 3D graphics</h2>
<h2 id="Functions_defining_transformations">Functions defining transformations</h2>
<h3 id="matrix()"><code>matrix()</code></h3>
<p>The <code>matrix()</code> CSS function specifies an 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.</p>
<p><code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p>
<div class="note">
  <strong>Note:</strong> Gecko (Firefox) accepts a {{ xref_csslength() }} value for <strong>tx</strong> and <strong>ty</strong>.<br />
  Webkit (Safari, Chrome) and Opera currently support a unitless {{ xref_cssnumber() }} for <strong>tx</strong> and <strong>ty</strong>.</div>
<h4 id="Syntax">Syntax</h4>
<pre>
matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>a</em> <em>b</em> <em>c</em> <em>d</em></dt>
  <dd style="margin-left: 40px;">
    Are {{ xref_cssnumber() }} describing the linear transformation.</dd>
  <dt style="margin-left: 40px;">
    <em>tx</em> <em>ty</em></dt>
  <dd style="margin-left: 40px;">
    Are {{ xref_csslength() }} describing the translation to apply.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
      <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>ty</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>tx</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>ty</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>tx</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[a b c d tx ty]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="matrix3d()"><code>matrix3d()</code></h3>
<p>The <code>matrix3d()</code> CSS function describes a 3D transform as a 4x4 homogenous matrix. The 16 parameters are described in the column-major order.</p>
<h4 id="Syntax">Syntax</h4>
<pre>
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>a1 b1 c1 d1</em> <em>a2 b2 c2 d2 </em><em>a3 b3 c3 d3</em> <em>d4</em></dt>
  <dd style="margin-left: 40px;">
    Are {{ xref_cssnumber() }} describing the linear transformation.</dd>
  <dt style="margin-left: 40px;">
    <em>a4</em> <em>b4 c4</em></dt>
  <dd style="margin-left: 40px;">
    Are {{ xref_csslength() }} describing the translation to apply.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
      <td colspan="1" rowspan="2">Cartesian-coordinate matrix doesn't allow to represent a generic 3d affine transforms as translations are not linear transforms.</td>
      <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="rotate()"><code>rotate()</code></h3>
<p><img align="left" alt="transform-functions-rotate_19.5.png" class="internal lwrap" src="/@api/deki/files/5976/=transform-functions-rotate_19.5.png" />The <code>rotate()</code> CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("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 <em>point reflection</em>.</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
rotate(<em>a</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    a</dt>
  <dd style="margin-left: 40px;">
    Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd></mtr> <mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
      <td><math>&nbsp;<mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math>&nbsp;<mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math>&nbsp;<mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[cos(a) -sin(a) sin(<em>a</em>) cos(<em>a</em>) 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="rotate3d()"><code>rotate3d()</code></h3>
<p>The <code>rotate3d()</code>CSS function defines a transformation that moves the element around a fixed axe 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.</p>
<p>In the 3D space, rotations have three degrees of liberty, describing an axis of rotation. The axis of rotation is defined by a [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} CSS property. If the vector is not <em>normalized</em>, 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.</p>
<div class="note">
  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.</div>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    x</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} describing the x-coordinate of the vector denoting the axis of rotation.</dd>
  <dt style="margin-left: 40px;">
    y</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} describing the y-coordinate of the vector denoting the axis of rotation.</dd>
  <dt style="margin-left: 40px;">
    z</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} describing the z-coordinate of the vector denoting the axis of rotation.</dd>
  <dt style="margin-left: 40px;">
    a</dt>
  <dd style="margin-left: 40px;">
    Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
      <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png" title="transform-functions-rotate3d_cart.png"><img alt="transform-functions-rotate3d_cart.png" class="internal default" src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="width: 510px; height: 47px;" /></a></td>
      <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png" title="transform-functions-rotate3d_hom4.png"><img alt="transform-functions-rotate3d_hom4.png" class="internal default" src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="width: 522px; height: 61px;" /></a></td>
    </tr>
  </tbody>
</table>
<h3 id="rotateX()"><code>rotateX()</code></h3>
<p>The <code>rotateX()</code>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.</p>
<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>
<p><code>rotateX(a)</code>is a shorthand for <code>rotate3D(1, 0, 0, a)</code>.</p>
<div class="note">
  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.</div>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
rotateX(<em>a</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    a</dt>
  <dd style="margin-left: 40px;">
    Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
      <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>-sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="rotateY()"><code>rotateY()</code></h3>
<p>The <code>rotateY()</code>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.</p>
<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>
<p><code>rotateY(a)</code>is a shorthand for <code>rotate3D(0, 1, 0, a)</code>.</p>
<div class="note">
  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.</div>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
rotateY(<em>a</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    a</dt>
  <dd style="margin-left: 40px;">
    Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
      <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="rotateZ()"><code>rotateZ()</code></h3>
<p>The <code>rotateZ()</code>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.</p>
<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>
<p><code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>.</p>
<div class="note">
  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.</div>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
rotateZ(<em>a</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    a</dt>
  <dd style="margin-left: 40px;">
    Is an {{ xref_cssangle() }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="scale()"><code>scale()</code></h3>
<p><img align="left" alt="transform-functions-scale_2_2.png" class="internal lwrap" src="/@api/deki/files/5804/=transform-functions-scale_2_2.png?size=webview" style="width: 350px; height: 290px;" /></p>
<p>The <code>scale()</code> CSS function modify the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, if can do so more in one direction than in another one.</p>
<p>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 equals, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines an homothetic transformation.</p>
<p>When outside the <code>]-1, 1[</code> range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equals to <code>1</code> it does nothing and when negative it performs a <em>point reflection</em> and the size modification.</p>
<div class="note" style="clear:left;">
  The <code>scale</code><code>()</code> function only applies the transformation in the Euclidian plane (in 2D). To scale in the space, the <code>scale3D()</code> function has to be used.</div>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
scale(<em>sx</em>) or
scale(<em>sx</em>, <em>sy</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>sx</em></dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} representing the abscissa of the scaling vector.</dd>
  <dt style="margin-left: 40px;">
    <em>sy</em></dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} representing the ordinate of the scaling vector. If not present, its default value is <em><strong>sx</strong></em>, leading to a uniform scaling preserving the shape of the element.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
      <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[sx 0 0 sy 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="scale3d()"><code>scale3d()</code></h3>
<p>The <code>scale3d()</code> CSS function modify the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, if can do so more in one direction than in another one.</p>
<p>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 equals, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines an homothetic transformation.</p>
<p>When outside the <code>]-1, 1[</code> range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equals to <code>1</code> it does nothing and when negative it performs a <em>point reflection</em> and the size modification.</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>sx</em></dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} representing the abscissa of the scaling vector.</dd>
  <dt style="margin-left: 40px;">
    <em>sy</em></dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} representing the ordinate of the scaling vector.</dd>
  <dt style="margin-left: 40px;">
    <em>sz</em></dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} representing the z-component of the scaling vector.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math><br />
        &nbsp;</td>
    </tr>
  </tbody>
</table>
<h3 id="scaleX()"><code>scaleX()</code></h3>
<p><img align="left" alt="transform-functions-scaleX_2.png" class="internal lwrap" src="/@api/deki/files/5807/=transform-functions-scaleX_2.png?size=webview" style="width: 350px; height: 296px;" />The <code>scaleX()</code> CSS function modify the abscissa of each element point by a constant factor. Except if this scale factor is <code>1</code>, in which case the function is the identity transform, the scaling is not isotropic and the angles of the element are not conserved.</p>
<p><code>scaleX(sx)</code> is a shorthand for <code>scale(sx, 1)</code> or for <code>scale3d(sx, 1, 1)</code>.</p>
<p><code>scaleX(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry" title="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a vertical axis passing by the origin (as specified by the <code><a href="transform-origin" rel="custom">transform-origin</a></code> property).</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
scaleX(<em>s</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>s</em></dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} representing the scaling factor to apply on the abscissa of each point of the element.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
      <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[s 0 0 1 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="scaleY()"><code>scaleY()</code></h3>
<p><img align="left" alt="transform-functions-scaleY_2.png" class="internal lwrap" src="/@api/deki/files/5967/=transform-functions-scaleY_2.png" /></p>
<p>The <code>scaleY()</code> CSS function modify the ordinate of each element point by a constant factor. Except if this scale factor is <code>1</code>, in which case the function is the identity transform, the scaling is not isotropic and the angles of the element are not conserved.</p>
<p><code>scaleY(sy)</code> is a shorthand for <code>scale(1, sy)</code> or for <code>scale3d(1, sy, 1)</code>.</p>
<p><code>scaleY(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry" title="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with an horizontal axis passing by the origin (as specified by the <code><a href="transform-origin" rel="custom">transform-origin</a></code> property).</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
scaleY(s)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>s</em></dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} representing the scaling factor to apply on the ordinate of each point of the element.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math>&nbsp;<mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td>
      <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 0 s 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="scaleZ()"><code>scaleZ()</code></h3>
<p>The <code>scaleZ()</code> CSS function modify the z-coordinate of each element point by a constant factor. Except if this scale factor is <code>1</code>, in which case the function is the identity transform, the scaling is not isotropic and the angles of the element are not conserved.</p>
<p><code>scaleZ(sz)</code> is a shorthand for <code>scale3d(1, 1, sz)</code>.</p>
<p><code>scaleZ(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry" title="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> along the z-axis passing by the origin (as specified by the <code><a href="transform-origin" rel="custom">transform-origin</a></code> property).</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
scaleZ(s)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>s</em></dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_cssnumber() }} representing the scaling factor to apply on the z-coordinate of each point of the element.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math><br />
        &nbsp;</td>
    </tr>
  </tbody>
</table>
<h3 id="skew()" style="clear:left;"><code>skew()</code></h3>
<p id="skew()">{{ non-standard_header() }}</p>
<p>The <code>skew()</code> 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.</p>
<div class="note style-wrap">
  <p><strong>Note:</strong> The <code>skew()</code> function was present in early drafts. It has been removed and is still present in some prefixed implementations. Do not use it.<br />
    <br />
    To achieve the same effect, use <code>skewX()</code> if you were using <code>skew()</code> with one parameter or <code>matrix(1, <em>tan(</em>ax<em>)</em></code><em>, </em><code><em>tan(</em>ay<em>)</em>, 1, 0, 0)</code> for the general way. Note that <em>tan()</em> isn't a CSS function and you have to precalculate it yourself.</p>
</div>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
skew(<em>ax</em>)       <em>or</em>
skew(<em>ax</em>, <em>ay</em>)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>ax</em></dt>
  <dd style="margin-left: 40px;">
    Is an {{ xref_cssangle() }} representing the angle to use to distort the element along the abscissa.</dd>
  <dt style="margin-left: 40px;">
    <em>ay</em></dt>
  <dd style="margin-left: 40px;">
    Is an {{ xref_cssangle() }} representing the angle to use to distort the element along the ordinate.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td colspan="1" rowspan="2">&nbsp;</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="skewX()"><code>skewX()</code></h3>
<p>The <code>skewX()</code> CSS function is an 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.</p>
<h4 class="editable" id="Syntax" style="clear:left;"><span>Syntax</span></h4>
<pre class="eval">
skewX(a)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>a</em></dt>
  <dd style="margin-left: 40px;">
    Is an {{ xref_cssangle() }} representing the angle to use to distort the element along the abscissa.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td colspan="1" rowspan="2">&nbsp;</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 tan(a) 1 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="skewY()"><code>skewY()</code></h3>
<p>The <code>skewY()</code> CSS function is an 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.</p>
<h4 class="editable" id="Syntax" style="clear:left;"><span>Syntax</span></h4>
<pre class="eval">
skewY(a)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>a</em></dt>
  <dd style="margin-left: 40px;">
    Is an {{ xref_cssangle() }} representing the angle to use to distort the element along the ordinate.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td colspan="1" rowspan="2">&nbsp;</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 tan(a) 0 1 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="translate()"><code>translate()</code></h3>
<p><img align="left" alt="transform-functions-translate_2.png" class="internal lwrap" src="/@api/deki/files/5970/=transform-functions-translate_2.png" style="" />The <code>translate()</code> 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.</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
translate(tx)       <em>or</em>
translate(tx, ty)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    tx</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_csslength() }} representing the abscissa of the translating vector.</dd>
  <dt style="margin-left: 40px;">
    ty</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_csslength() }} representing the ordinate of the translating vector. If missing, it is assumed to be equals to <strong>tx</strong> :&nbsp; <code>translate(2)</code> means <code>translate(2, 2)</code>.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">
        <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
      </td>
      <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 0 1 tx ty]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="translate3d()"><code>translate3d()</code></h3>
<p>The <code>translate3d()</code> 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.</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
translate3d(tx, ty, tz)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    tx</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_csslength() }} representing the abscissa of the translating vector.</dd>
  <dt style="margin-left: 40px;">
    ty</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_csslength() }} representing the ordinate of the translating vector.</dd>
  <dt style="margin-left: 40px;">
    tz</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_csslength() }} representing the z component of the translating vector. It can't be a {{ xref_csspercentage() }} value; in that case the property containing the transform is considered invalid.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">
        <p>This transform applies to the 3D space and cannot be represented on the plan.</p>
      </td>
      <td colspan="1" rowspan="2">A translation is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="translateX()"><code>translateX()</code></h3>
<p><img align="left" alt="transform-functions-translateX_2.png" class="internal lwrap" src="/@api/deki/files/5972/=transform-functions-translateX_2.png" style="" />The <code>translateX()</code> CSS function moves horizontally the element on the plane. This transformation is characterized by a {{ xref_csslength() }} defining how much it moves horizontally.</p>
<p><code>translateX(tx)</code> is a shortcut for <code>translate(tx, 0)</code>.</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
translateX(t)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    t</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_csslength() }} representing the abscissa of the translating vector.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">
        <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
      </td>
      <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 0 1 t 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="translateY()"><code>translateY()</code></h3>
<p><img align="left" alt="transform-functions-translateY_2.png" class="internal lwrap" src="/@api/deki/files/5971/=transform-functions-translateY_2.png" style="" />The <code>translateY()</code> CSS function moves vertically the element on the plane. This transformation is characterized by a {{ xref_csslength() }} defining how much it moves vertically.</p>
<p><code>translateY(ty)</code> is a shortcut for <code>translate(0, ty)</code>.</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
translateY(t)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    t</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_csslength() }} representing the z-component of the translating vector. It can't be a {{ xref_csspercentage() }} value; in that case the property containing the transform is considered invalid.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">
        <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
      </td>
      <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 0 1 0 t]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="translateZ()"><code>translateZ()</code></h3>
<p>The <code>translateZ()</code> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{ xref_csslength() }} defining how much it moves.</p>
<p><code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>.</p>
<h4 id="Syntax" style="clear:left;">Syntax</h4>
<pre class="eval">
translateZ(t)
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    t</dt>
  <dd style="margin-left: 40px;">
    Is a {{ xref_csslength() }} representing the ordinate of the translating vector.</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>2</sup></th>
      <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
      <th scope="col">Homogenous coordinates on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
      <td colspan="1" rowspan="2">A translation is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math><br />
        &nbsp;</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision