Traduire

translate() et translateZ() nous permettent de déplacer un élément de 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, nous pouvons utiliser translateX() et translateY() pour déplacer un élément uniquement horizontalement ou verticalement.

• translate() - accepte jusqu'à 3 valeurs ;
  • X_value est le mouvement le long de l'axe des 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 est le mouvement le long de l'axe des y. Une valeur positive déplace l'élément vers le bas, et une valeur négative le déplace vers le haut ;
  • Z_value est le mouvement le long de l'axe des z. Une valeur positive rapproche l'élément de l'observateur, et une valeur négative l'éloigne. Si vous spécifiez seulement 1 ou 2 valeurs, le navigateur applique la ou les mêmes valeurs pour l'axe ou les axes manquants.
• translateX() et translateY() - acceptent chacun 1 valeur ;
  • translateX(value) spécifie le mouvement horizontal. Une valeur positive déplace l'élément vers la droite, et une valeur négative le déplace vers la gauche ;
  • translateY(value) spécifie le mouvement vertical. Une valeur positive déplace l'élément vers le bas, et une valeur négative le déplace vers le haut.
• translateZ() - accepte 1 valeur. Il spécifie le mouvement le long de l'axe des z, ce qui peut créer des transformations 3D. Une valeur positive rapproche l'élément de l'observateur, et une valeur négative l'éloigne.

Voyons ce que nous pouvons réaliser avec l'aide de ces fonctions :

Propriété translate3d()

Nous pouvons également ajouter un déplacement d'élément en 3D à l'aide d'une seule propriété. Cependant, en général, les utilisateurs ont des écrans 2D, et ce mouvement 3D sera invisible. En même temps, de plus en plus d'utilisateurs essaient de ressentir la réalité en 3D. Donc bientôt, la plupart des utilisateurs auront des écrans à 3 dimensions, et cette propriété sera utile. La syntaxe est la suivante :

Nous ajoutons le déplacement sur l'axe z comme dernière valeur. Une valeur positive est un mouvement vers l'avant de l'utilisateur. Une valeur négative est un mouvement vers l'arrière de l'utilisateur.

Voyons l'exemple :

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