translateZ()

Exemple interactif

transform: translateZ(0);

transform: translateZ(42px);

transform: translateZ(-9.7rem);

transform: translateZ(-3ch);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Cette transformation est définie par une <length> qui précise de combien l'élément ou les éléments se déplacent vers l'intérieur ou l'extérieur.

Dans les exemples interactifs ci-dessus, perspective: 550px; (pour créer un espace 3D) et transform-style: preserve-3d; (pour que les enfants, les 6 faces du cube, soient aussi positionnés dans l'espace 3D) sont appliqués au cube.

Syntaxe

translateZ(tz)

Valeurs

tz

Une longueur (<length>) représentant la composante z du vecteur de déplacement [0, 0, tz]. Dans le système de coordonnées cartésiennes, cela représente le déplacement le long de l'axe z. Une valeur positive rapproche l'élément de l'utilisateur·ice, une valeur négative l'éloigne.

Syntaxe formelle

<translateZ()> = 
  translateZ( <length> )  

Exemples

Dans cet exemple, deux boîtes sont créées. L'une est positionnée normalement sur la page, sans aucune translation. La seconde est modifiée en appliquant une perspective pour créer un espace 3D, puis déplacée vers l'utilisateur·ice.

HTML

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

CSS

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

.moved {
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}

Ce qui importe vraiment ici est la classe « moved » ; voyons ce qu'elle fait. D'abord, la fonction perspective() positionne l'utilisateur·ice par rapport au plan qui se trouve où z=0 (en essence, la surface de l'écran). Une valeur de 500px signifie que l'utilisateur·ice est à 500 pixels « devant » l'image située à z=0.

Ensuite, la fonction translateZ() déplace l'élément de 200 pixels « vers l'extérieur » de l'écran, vers l'utilisateur·ice. Cela a pour effet de faire apparaître l'élément plus grand lorsqu'il est vu sur un affichage 2D, ou plus proche lorsqu'il est vu avec un casque VR ou un autre dispositif d'affichage 3D.

Notez que si la valeur de perspective() est inférieure à celle de translateZ(), comme transform: perspective(200px) translateZ(300px); l'élément transformé ne sera pas visible car il est plus éloigné que la fenêtre de l'utilisateur·ice. Plus la différence entre les valeurs de perspective et de translateZ est faible, plus l'utilisateur·ice est proche de l'élément et plus l'élément déplacé semblera grand.

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété transform
• Le type de donnée <transform-function>
• La propriété translate