Translate - Property CSS

translate

Summary of characteristics of the translate property

Quick description
Applies a translation to an element (a linear displacement).
Status
Standard
Usable for
HTML
Predefined values
none
Percentages
Calculated in relation to the initial dimensions of the element.
Initial value
none
Inherited by default
No.
Animation type
Computed value : during an animation, the translate property gradually changes from one value to another.
W3C Module
CSS Transforms Module
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of translate.

translate - Syntax DiagramSyntax diagram of the translate CSS property. none none length length {1,3} {1,3}translate:;translate:;
Syntax diagram of the translate property
Description of values

Details concerning the diagram above:

  • length is a numeric value followed by one of the CSS dimension units. From one to three values can be indicated, separated by spaces. They correspond to the movements along the three axes.

Description of the translate property.

The translate property defines the translation (movement) of the element along one or more of the three axes. It accepts from one to three values, which correspond to the displacements along the x, y, and z axes.
The x and y axes are in the plane of the screen, while the z-axis is perpendicular to the screen, and directed to the reader's eyes.

The 3 axis

Difference from the general property transform.

Although transform:translateX(50px) and translate:50px do equivalent things, there is still a difference important to note. This difference occurs when several successive transformations are applied to an element. Indeed, transform considers that the reference axes are associated with the element and therefore applies the same transformations to these axes as to the element. This is not done by individual transformation properties such as rotate or translate.

The difference is shown below: an element has been rotated 30 degrees and then shifted 100 pixels. Depending on the syntax used, it is not found in the same location.

Successive transformations with rotate() and translate()
Result of rotation followed by translation
transform:rotate(30deg) translate(100px);
Successive transformations with translate
Result of rotation followed by translation
rotate:30deg;
translate:100px;

Values for translate.

  • translate: none;

    Default. No displacement is applied to the element.

  • translate: 20px;

    If only one unique value is specified, the element is moved horizontally (along the x-axis).

    The value must be followed by one of the dimension units (see the CSS dimension units). If the value is specified as a percentage, it will be calculated relative to the width of the element.

    A negative value causes a shift to the left, while a positive value matches to a shift to the right.

  • translate: 20px 30px;

    When two values are specified, they correspond to the displacements to be applied, respectively horizontally (x-axis) and vertically (y-axis).

  • translate: 20px 50px 20px;

    When a third value is specified, it applies to a move of the element along the z-axis.

    Moves along the z-axis are only visible if the perspective property has been applied to the parent with a value other than none.

Common values:

translate: initial (none) translate: inherit translate: revert translate: revertLayer translate: unset

These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Animation of the translate property.

The animation of the translate property results in an element that moves horizontally or vertically across the page, or even along the Z-axis in the case of a 3D animation.

Simulator.

To make z-axis moves visible, the perspective property has been applied to the parent element, with a value of 100 pixels.

translate :

Browser compatibilité.

The translate property is well recognized by browsers. Syntax using the transform property with the translate() function is also another valid possibility.

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 property (3d transformations).

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
property
Estimated overall support.
97%
97%
94%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1
2

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

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse

translate property historic.

  • CSS Transforms Module Level 2

    Adding the translate property, in addition to the more general transform property and the translate() function, these two terms still being standardized.
    WD
    March 03, 2020
    Working Draft.
    CR
    PR
    REC

See also, concerning transformations.

The CSS Transforms Module describes the translate property, as well as all other properties and functions related to transformations:

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.

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.
translate()
Defines a translation (a linear move) to an element.
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).