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 unifrome (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.

Syntaxe

scale(sx) ou
scale(sx, sy)

Valeurs

sx

Une valeur de type <number> qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal).

sy

Une valeur de type <number> qui 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 sx (on aura ainsi une transformation homogène).

Exemples

Déformation horizontale

HTML

<p>toto</p>
<p class="transformation">truc</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  /* identique à scaleX(2) scaleY(2)*/
  transform: scale(2);
  background-color: blue;
}

Résultat

Déformer horizontalement et verticalement en décalant l'origine

HTML

<p>toto</p>
<p class="transformation">truc</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  /* identique à scaleX(2) scaleY(0.5) */
  transform: scale(2, 0.5);
  transform-origin: left;
  background-color: blue;
}

Résultat