Translate() - Function CSS

translate()
translate3d()

Summary of characteristics of the translate() function

Quick description
Defines a translation (a linear move) to an element.
Status
Standard
Percentages
Calculated relative to the dimension of the element in the corresponding direction.
W3C Module
CSS Transforms Module
References (W3C)
Document status: CR (Candidate Recommendation)

Description of translation functions.

The translateX(), translateY(), translateZ() functions, used with the transform property apply a translation, i.e. a linear displacement, to an element, along one of the axes.

  • Axe X : horizontal displacement.
  • Axe Y : vertical displacement.
  • Axe Z : displacement perpendicular to the screen surface.

The 3 axes for the translate3d() function

The translate3d() function allows 3D translation, along one or more of the X, Y, and Z axes. It is therefore a shortcut that can replace the three functions translateX(), translateY() and translateZ().
Note that Z-axis translations will only be visible if you apply a perspective() .

Translation functions can be used with:

  • transform : Applies one or more geometric transformations (rotations, enlargements, etc.).

Syntax for theses function.

  • transform: translateX(100px); x transform: translateY(5px); y transform: translateZ(5px); z

    x, y, and z define the travel distance along the X, Y, and Z axes respectively. These are three positive or negative numerical values followed by their unit (see CSS dimension units).

    x and y can also be indicated as percentages, which are then calculated in relation to the width and at the height of the element. z must be indicated in an absolute unit (px, cm, etc.).

  • transform: translate(100px, 200px); x y transform: translate3d(100px, 5px, 5px); x y z

    translate() is a shorthand for translateX() and translateY(). If only one value is specified, it is applied to the X-axis, no movement is made along the Y-axis.

    translate3d() is a shortcut that allows you to define the movements along the three axes in a single write. Curiously, the three values are obligatory here.

Animation of translation functions.

All translation functions can be animated. Since they accept numerical parameters, their animation is very smooth.

Simulator.

Note: To make Z-axis translations visible, the simulator also applies the perspective() function.

transform :
Result

Browser compatibility and support.

All current browsers handle 3D transformations correctly. The CSS functions translate(), translateX(), translateY(), translateZ(), and translate3d() are also well supported.

Column 1
General support for 2D transformations, including rotations, element translations, and more
Column 2
General support for 3D animations, including support for perspective management and support for the backface-visibility property.
Column 3
Support for the translate() function which defines a 2D translation, following the X and Y axes.
Column 4
Support de la fonction translate3d() qui définit une transformation en 3D, suivant les axes X, Y et Z.

Notes:

(1) Does not support 2D transformations on SVG elements. Use the transform attribute instead.

(2) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

1
2D
transformations
2
3D
transformations
3
translate()
function
4
translate3d()
function
Estimated overall support.
97%
97%
96%
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Historic of translation functions.

  • CSS Transforms Module Level 1

    First level of specification concerning 2D transformations.
    Presentation of the different transformation functions including translate(), translateX() and translateY().
    WD
    February 28, 2012
    Working Draft.
    CR
    February 14, 2019
    Candidate Recommendation.
    PR
    REC
  • CSS Transforms Module Level 2

    Level 2 of the Transforms specification, introducing 3D transformations.
    Adding translateZ() and translate3d() functions.
    The 2D functions transalte(), translateX() and translateY() are unchanged.
    WD
    March 03, 2020
    Working Draft.
    CR
    PR
    REC

See also, concerning transformations.

The CSS Transforms Module specification module contains all the properties and functions related to CSS transformations. The functions translate(), translateX(), translateY(), translateZ(), and translate3d() are described in this module, along with all of the following functions and properties:

Properties:

backface-visibility
Visibility of the rear side of the element (while it is rotating).
perspective
Langue française
A perspective effect applied to a 3D transformed element.
perspective-origin
Langue française
Position of the observer in the case of a 3D distortion with perspective.
rotate
Defines a rotation to apply to the element.
scale
Sets a scaling of the element (magnification or shrinking).
transform
Applies one or more geometric transformations (rotations, enlargements, etc.).
transform-box
Langue française
Sets the reference box for transformations.
transform-origin
Langue française
Sets the origin point for transformations.
transform-style
Langue française
Defines how elements that undergo a 3D transformation are rendered.
translate
Applies a translation to an element (a linear displacement).

Functions:

matrix()
Applies a composite transformation to an element (translations, rotations...).
matrix3d()
Langue française
Applies a series of 3D transformations to an element.
perspective()
Langue française
Sets the height of the observer in the case of a 3D transformation.
rotate()
Sets a rotation to apply to the element in 2D (in the plane of the screen).
rotate3d()
Defines a 3D rotation to be applied to an element around any axis in 3D.
rotateX()
Defines a rotation of the element around the X-axis (in 3D),
rotateY()
Sets a 3D rotation of the element around the y-axis.
rotateZ()
Sets a rotation of the element around the z-axis.
scale()
Sets a magnification or reduction of the element.
scale3d()
Sets 3D scaling.
scaleX()
Sets X-axis scaling.
scaleY()
Set Y-axis scaling.
scaleZ()
Set Z-axis scaling.
skew()
Sets a tilt of the element along the X and/or Y axes.
skewX()
Sets a tilt of the element along the X-axis.
skewY()
Sets a tilt of the element along the Y-axis.
translate3d()
Defines a 3D translation along one or more of the X, Y, and Z axes.
translateX()
Defines a translation along the X-axis (horizontally).
translateY()
Defines a translation along the Y axis (vertically).
translateZ()
Defines a translation along the Z axis (perpendicular to the screen).