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

scalez()

La fonction scalez() modifie la coordonnée en Z de chaque point de l'élément avec un facteur multiplicateur donné. Si ce facteur vaut 1, l'opération appliqué sera l'identité. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés.

La fonction scalez(sz) est une notation raccourcie équivalente à scale3d(1, 1, sz).

La fonction scalez(-1) définit une symétrie axiale par rapport à l'axe Z passant par l'origine du repère (définie grâce à la propriété transform-origin).


<style>
.fond {
  width: 240px;
  height: 180px;
  border: 1px dotted black;
}
.carre {
  width: 120px;
  height: 120px;
  background-color: orange;
}
.carre#sca {
  transform: perspective(800px) scalez(4.5) translatez(-200px);
}
</style>

<div class="fond">
  <div class="carre"></div>
</div>
<br>

<div class="fond">
  <div class="carre" id="sca"></div>
</div>