scale()
La fonction scale() permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions.Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée.
Lorsque les coordonnées du vecteur sont en dehors de l'intervalle [-1, 1], la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.
La fonction scale() nécessite une ou deux valeurs :
La première représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal).
La deuxième représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera la première (on aura ainsi une transformation homogène), scale(2) et scale(2, 2) représentent la même transformation.
<style>
.fond {
width: 180px;
height: 180px;
border: 1px dotted black;
}
.rec {
width: 150px;
height: 120px;
background-color: greenyellow;
}
.rec#sca {
transform-origin: center top;
transform: scale(0.5, 1.5);
}
</style>
<div class="fond">
<div class="rec"></div>
</div>
<br><br>
<div class="fond">
<div class="rec" id="sca"></div>
</div>