`Translate()` - Fonction CSS

translate()

translate3d()

Résumé des caractéristiques de la fonction `translate()`

Description rapide

Définit une translation (un déplacement) à un élément.

Statut

Standard

Pourcentages

Calculés par rapport à la dimension de l'élément dans la direction correspondante.

Module W3C

Module CSS - Transformations

Références (W3C)

CSS Transforms Module Level 1

Statut du document: CR (document candidat à la recommandation)

Description des fonctions de translation.

Les fonctions translateX(), translateY(), translateZ(), utilisées avec la propriété transform appliquent applique une translation, c'est à dire un déplacement linéaire, à un élément, suivant l'un des axes.

Axe X : déplacement horizontal.
Axe Y : déplacement vertical.
Axe Z : déplacement perpendiculaire à la surface de l'écran.

Les 3 axes pour la fonction translate3d()

La fonction translate3d() permet une translation en 3D, suivant un ou plusieurs des axes X, Y et Z. C'est donc un raccourci qui peut remplacer les trois fonctions translateX(), translateY() et translateZ().
Notez que les translations suivant l'axe Z ne seront visibles que si vous appliquez une perspective().

Les fonctions de translation peuvent être utilisées avec :

transform : Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).

Syntaxe pour ces fonction.

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

x, y et z définissent la distance de déplacement respectivement suivant les axes X, Y et Z. Ce sont trois valeurs numériques positives ou négatives suivies de leur unité (voir les unités de dimension).

x et y peuvent également être indiqués en pourcentages, ceux-ci sont alors calculés par rapport à la largeur et à la hauteur de l'élément. z doit être indiqué dans une unité absolue (px, cm, etc).
transform: translate(100px, 200px); x y transform: translate3d(100px, 5px, 5px); x y z

translate() est un raccourci pour translateX() et translateY(). Si une seule valeur est indiquée, elle est appliquée à l'axe X, aucun déplacement n'est effectué suivant l'axe Y.

translate3d() est un raccourci qui permet de définir en une seule écriture les déplacements suivant les trois axes. Curieusement, les trois valeurs sont ici obligatoires.

Animation des fonctions de translation.

Toutes les fonctions de translation peuvent être animées. Comme elles acceptent des paramètres numériques leur animation est très fluide.

Simulateur avec la fonction `translate()`.

Remarque : pour que les translations suivant l'axe Z soient visible, le simulateur applique également la fonction perspective().

transform :

translate3d( 0px, 0px, 0px ) /* Aucune transformation */

translate3d( 100px, 0px, 0px ) /* Équivalente à transformX( 100px ) */

translate3d( 0px, 50px, 0px ) /* Équivalent à transformY( 50px ) */

translate3d( 0px, 0px, 20px ) /* Équivalent à transformZ( 20px ) */

translate3d( 50px, -20px, 0px ) /* Transformations multiples */

translate3d( 100%, 0%, 0px ) /* Syntaxe avec pourcentages */

Résultat

Compatibilité et prise en charge par les navigateurs.

Tous les navigateurs actuels traitent correctement les transformations en 3D. Les fonctions CSS translate(), translateX(), translateY(), translateZ() et translate3d() sont également bien prises en charge.

Colonne 1

Prise en charge générale des transformation 2D, incluant les rotations, les translations d'éléments, etc.

Colonne 2

Prise en charge générale des animations en 3D, incluant le support pour la gestion de la perspective et le support pour la propriété backface-visibility.

Colonne 3

Support de la fonction translate() qui définit une translation en 2D, suivant les axes X et Y.

Colonne 4

Support de la fonction translate3d() qui définit une transformation en 3D, suivant les axes X, Y et Z.

Remarques :

(1) Ne supporte pas les transformations 2D sur les éléments SVG. Utilisez l'attribut transform à la place.

(2) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

Transformations
2D

Transformations
3D

Fonction
translate()

Fonction
translate3d()

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique des fonctions de translation.

Module CSS - Transformations - Niveau 1

Premier niveau de spécification concernant les transformations en 2D.
Présentation des différentes fonctions de transformation dont translate(), translateX() et translateY().

28 Février 2012
Document de travail.
14 Février 2019
Candidat à la recommandation.
Module CSS - Transformations - Niveau 2

Niveau 2 de la spécification sur les transformations, introduisant les transformations en 3D.
Ajout des fonctions translateZ() et translate3d().
Les fonctions 2D transalte(), translateX() et translateY() sont inchangées.

03 Mars 2020
Document de travail.

Voir aussi, concernant les transformations.

Le module de spécification CSS Transforms Module regroupe toutes les propriétés et fonctions concernant les transformations en CSS. Les fonctions translate(), translateX(), translateY(), translateZ() et translate3d() sont décrites dans ce module, ainsi que toutes les fonctions et propriétés suivantes :