translate() et translateZ() permettent de déplacer un élément depuis sa position d'origine dans une direction spécifique par rapport à sa position actuelle. Ces fonctions font partie de la propriété CSS transform. De plus, il est possible d'utiliser translateX() et translateY() pour déplacer un élément uniquement horizontalement ou verticalement.

transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);

• translate() – accepte jusqu'à 3 valeurs ;
  • X_value correspond au déplacement sur l'axe x. Une valeur positive déplace l'élément vers la droite, tandis qu'une valeur négative le déplace vers la gauche ;
  • Y_value correspond au déplacement sur l'axe y. Une valeur positive déplace l'élément vers le bas, et une valeur négative vers le haut ;
  • Z_value correspond au déplacement sur l'axe z. Une valeur positive rapproche l'élément de l'utilisateur, et une valeur négative l'éloigne. Si une ou deux valeurs seulement sont spécifiées, le navigateur applique la ou les mêmes valeurs pour l'axe ou les axes manquants.
• translateX() et translateY() – acceptent chacune une valeur ;
  • translateX(value) définit le déplacement horizontal. Une valeur positive déplace l'élément vers la droite, et une valeur négative vers la gauche ;
  • translateY(value) définit le déplacement vertical. Une valeur positive déplace l'élément vers le bas, et une valeur négative vers le haut.
• translateZ() – accepte une valeur. Elle définit le déplacement sur l'axe z, ce qui permet de créer des transformations 3D. Une valeur positive rapproche l'élément de l'utilisateur, et une valeur négative l'éloigne.

Voyons ce qu'il est possible de réaliser à l'aide de ces fonctions :

Propriété translate3d()

Il est également possible d'ajouter un déplacement d'élément en 3D à l'aide d'une seule propriété. Cependant, en général, les utilisateurs disposent d'écrans 2D, et ce mouvement 3D sera invisible. Par ailleurs, de plus en plus d'utilisateurs cherchent à expérimenter la réalité en 3D. Ainsi, la plupart des utilisateurs disposeront bientôt d'écrans à trois dimensions, et cette propriété deviendra utile. La syntaxe est la suivante :

transform: translate3d(X_value, Y_value, Z-value);

Le déplacement selon l'axe z est ajouté en dernière valeur. Une valeur positive correspond à un mouvement vers l'avant de l'utilisateur. Une valeur négative correspond à un mouvement vers l'arrière de l'utilisateur.

Examinons l'exemple suivant :

Vous disposez probablement d'un écran 2D comme moi, et nous ne pouvons pas percevoir le déplacement le long de l'axe z.