translateZ()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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

Exemple interactif

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

css
translateZ(tz)

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

html
<div>Statique</div>
<div class="moved">Déplacé</div>

CSS

css
div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  /* 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);
  background-color: pink;
}

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

Specification
CSS Transforms Module Level 2
# funcdef-translatez

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
translateZ()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi