Faire son site 11 : Référence CSS - translatez()

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 qui définit l'amplitude du mouvement.

La notation translatez(tz) est une notation abrégée pour translate3d(0, 0, ty).

- tz représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être un pourcentage, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide.


<style>
.fond {
   perspective: 800px;
  width: 200px;
  height: 200px;
  border: 1px dotted black;
}
.rect {
  width: 120px;
  height: 120px;
  background-color: palegreen;
}
.rect#trans {
  transform: translatez(-300px);
}
</style>
<div class="fond">
  <div class="rect"></div>
</div>
<br>

<div class="fond">
  <div class="rect" id="trans"></div>
</div>