La fonction translateZ()
permet de déplacer un élément selon l'axe z de l'espace tridimensionnel. Cette transformation est caractérisée par une valeur de longueur (type <length>
) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type <transform-function>
.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
translateZ(tz)
est un raccourci équivalent à translate3d(0, 0, tz)
.
Dans les exemples interactifs ci-avant, perspective: 500px;
a été utilisée afin de créer un espace en trois dimensions et transform-style: preserve-3d
permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D.
Syntaxe
translateZ(t)
Valeurs
t
- Une valeur de type
<length>
qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type<percentage>
, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide.
Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
---|---|---|---|
Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur un plan. | Une translation n'est pas une transformation linéaire sur ℝ3 et ne peut donc pas être représentée avec une matrice dans le système cartésien. |
Exemples
HTML
<p>toto</p>
<p class="transformation">truc</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformation {
/* On ajoute une perspective pour créer un */
/* espace 3D. L'utilisateur regarde « depuis »*/
/* 500px et on avance l'élément vers l'utili- */
/* sateur de 200px */
transform: perspective(500px) translateZ(200px);
}
Résultat
Si la valeur fournie à perspective()
est inférieure à l'argument de translateZ()
(ex. transform: perspective(200px) translateZ(300px);
), l'élément transformé ne sera pas visible car il sera situé au-delà de l'espace projeté sur l'écran. Plus l'écart entre ces deux arguments est faible, plus l'élément paraîtra proche de l'utilisateur.
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Transforms Level 2 La définition de 'transform' dans cette spécification. |
Brouillon de l'éditeur | Ajout des fonctions de transformations 3D au module standard CSS Transforms |
Compatibilité des navigateurs
Voir la page sur le type de donnée <transform-function>
pour les informations de compatibilité associées.