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.

La fonction scale() applique un transformation dans le plan (2D). S'il faut que la transformation doit être appliqué dans l'espace (3D), on pourra utiliser la fonction scale3D() .

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).
Coordonnées cartésiennes sur ℝ2 Coordonnées homogènes sur ℝℙ2 Coordonnées cartésiennes sur ℝ3 Coordonnées homogènes sur ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]

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

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Sebastianz
 Dernière mise à jour par : SphinxKnight,