translateZ()

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. 10000100001t0001

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

 Contributeurs à cette page : SphinxKnight, mrstork
 Dernière mise à jour par : SphinxKnight,