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 :

CSS - Fonction translate()

Description de la fonction translate().

La fonction translate() calcule une translation, c'est à dire un déplacement linéaire. Cette translation peut ensuite être appliquée à un élément avec la propriété transform.
translate() permet une translation en 2D, suivant l'axe X et/ou l'axe Y. C'est donc un raccourci qui peut remplacer les deux fonctions :

  • translateX() : déplacement horizontal.
  • translateY() : déplacement vertical.

Les translations sont possibles également dans la profondeur, suivant l'axe Z (l'élément s'approche du lecteur ou, au contraire, s'enfonce dans l'écran). On parle alors de transformations 3D. Reportez-vous aux fonctions translateZ() ou translate3d().

La fonction translate() peut être utilisée avec :

  • transform : Applique une transformation géométrique.

Syntaxe de la fonction translate().

  • transform: translate(100px, 50px); x y

    x et y définissent la distance de déplacement, respectivement suivant l'axe X et l'axe Y.

    Ce sont deux valeurs numériques positives ou négatives suivies de leur unité (voir les unités de dimensions en CSS).

    Si x et y sont indiqués en pourcentages, ceux-ci sont calculés par rapport à la largeur et à la hauteur de l'élément.

    Si une seule valeur est indiquée, elle s'applique à l'axe X : pas de déplacement suivant l'axe Y.

Simulateur.

transform:
( x y )
Résultat

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs traitent correctement toutes les transformations en 2D : translations, rotations, inclinaisons, mises à l'échelle, dans le plan de l'écran.

Afficher les versions antérieures   Afficher la version à venir