Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

translateX(), translateY(), translateZ() et translate3d()

translate()

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

Description rapide
Applique 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)
Statut du document:: CR (document proposé pour 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 translate() 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().

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

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

Syntaxe de la fonction translate().

  • transform: translateX(100px); x transform: translateY(5px); y transform: translateZ(5px); z transform: translate3d(100px, 5px, 5px); x y 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 CSS 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).

    Pour la fonction translate(), les trois valeurs doivent obligatoirement être indiquées.

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

    [} 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.

Simulateur.

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

transform :
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() sont également bien prises en charge.

Colonne 1
Prise en charge générale des transformation 2D (dans le plan de l'écran).
Colonne 2
Prise en charge générale des transformations 3D (avec effet de perspective).
Colonne 3
Traitement des fonctions translate(), translateX() et translateY().
Colonne 4
Traitement de la fonction translate3d() et translateZ().
1
2D transformations
2
3D transformations
3
translate()
4
translate3d()
Estimation de la prise en charge en pourcentage du parc actuel.
98%
97%
98%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que translate().

Les spécifications CSS éditées par le W3C sont organisées en modules. translate() fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Visibilité de la face arrière de l'élément (pendant sa rotation).
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
Définit une rotation de l'élément.
Définit un mise à l'échelle de l'élément (agrandissement ou réduction).
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
Définit la boîte de référence pour les transformations.
Point d'origine pour les transformations.
Rendu des éléments soumis à une transformation 3D.
Définit une translation de l'élément (un déplacement).
Définit un agrandissement ou une réduction de l'élément.

Fonctions.

Applique une transformation composite à un élément (translations, rotations...)
Applique une série de transformations 3D à un élément.
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
Définit une rotation de l'élément en 2D (dans le plan de l'écran).
Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D.
Définit une rotation de l'élément autour de l'axe X (en 3D),
Définit une rotation 3D de l'élément autour de l'axe Y.
Définit une rotation de l'élément autour de l'axe Z.
Définit un agrandissement ou une réduction de l'élément.
Définit une mise à l'échelle en 3D.
Définit une mise à l'échelle suivant l'axe X.
Définit une mise à l'échelle suivant l'axe Y.
Définit une mise à l'échelle suivant l'axe Z.
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
Définit une inclinaison de l'élément suivant l'axe X.
Définit une inclinaison de l'élément suivant l'axe Y.
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
Définit une translation suivant l'axe X (horizontalement).
Définit une translation suivant l'axe Y (verticalement).
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).