Translate() - Function CSS
Summary of characteristics of the translate()
function
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 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
, andz
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
andy
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 fortranslateX()
andtranslateY()
. If only one value is specified, it is applied to theX-axis
, no movement is made along theY-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.
Browser compatibility and support.
All current browsers handle 3D transformations correctly.
The CSS functions translate()
, translateX()
, translateY()
, translateZ()
, and translate3d()
are also
well supported.
the backface-visibility
property.translate()
function which defines a 2D translation, following the X and Y axes.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.
transformations
transformations
translate()
function
translate3d()
function
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 includingtranslate()
,translateX()
andtranslateY()
.February 28, 2012Working Draft.February 14, 2019Candidate Recommendation. -
CSS Transforms Module Level 2
Level 2 of the Transforms specification, introducing 3D transformations.
AddingtranslateZ()
andtranslate3d()
functions.
The 2D functionstransalte()
,translateX()
andtranslateY()
are unchanged.March 03, 2020Working Draft.
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:





Functions:

