Traduction des Éléments pour des Effets Dynamiques
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_valuecorrespond 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_valuecorrespond 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_valuecorrespond 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()ettranslateY()– 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 :
index.html
index.css
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 :
index.html
index.css
Vous disposez probablement d'un écran 2D comme moi, et nous ne pouvons pas percevoir le déplacement le long de l'axe z.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you show an example of how translate3d() works in CSS?
What are some practical uses for translateZ() or translate3d() today?
How does translate3d() differ from using translate() with three values?
Awesome!
Completion rate improved to 2.04Traduction des Éléments pour des Effets Dynamiques
Glissez pour afficher le menu
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_valuecorrespond 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_valuecorrespond 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_valuecorrespond 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()ettranslateY()– 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 :
index.html
index.css
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 :
index.html
index.css
Vous disposez probablement d'un écran 2D comme moi, et nous ne pouvons pas percevoir le déplacement le long de l'axe z.
Merci pour vos commentaires !
