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.
translateZ(tz) est un raccourci équivalent à translate3d(0, 0, tz).
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
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight,
mrstork
Dernière mise à jour par :
SphinxKnight,