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

scaley()

La fonction scaley() permet de modifier l'ordonnée de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.

La fonction scaley(sy) est une notation raccourcie équivalente à scale(1, sy) ou à scale3d(1, sy, 1).

La fonction scaley(-1) définit une symétrie axiale par rapport à un axe horizontal 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: salmon;
}
.carre#sca {
  transform-origin: center;
  transform: scaley(0.5);
}
</style>

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

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