Translate - Property CSS

Syntax diagram of translate.

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.

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.

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

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.

• 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.

Browser compatibilité.

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

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

  In addition to the 2D transformations already presented in level 1 of the specification, this module deals with 3D transformations. It introduces new properties to manage the viewpoint height and the rendering of 3D effects.
  This module also introduces the individual properties of rotation, translation, and zoom effect.

  Regarding translate. Adding the translate property, in addition to the more general transform property and the translate() function, these two terms still being standardized.
  

  March 03, 2020

  Working Draft.

  

  

  

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

A perspective effect applied to a 3D transformed element.

perspective-origin

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

Sets the reference box for transformations.

transform-origin

Sets the origin point for transformations.

transform-style

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()

Applies a series of 3D transformations to an element.

perspective()

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).