Fonction scale

La fonction scale met à l'échelle un élément : elle l'agrandit ou le réduit plusieurs fois. La mise à l'échelle s'effectue autour du point défini par la propriété transform-origin.

Peut prendre un ou deux paramètres, énumérés par des virgules. S'il y a deux paramètres - le premier paramètre définit la mise à l'échelle horizontale, et le second - la verticale. S'il n'y a qu'un paramètre, alors il définit la mise à l'échelle horizontale et verticale simultanément.

La valeur des paramètres est un nombre entier ou fractionnaire. S'il est supérieur à 1 - l'élément est agrandi, s'il est inférieur (par exemple, 0.5) - l'élément est réduit. Si on définit 1 - rien ne change (c'est la valeur par défaut).

Syntaxe

csssélecteur {
  transform: scale(un ou deux nombres);
}

Exemple

Au survol du bloc, augmentons l'échelle de 1.5 fois sur les deux axes :

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1.5);
}

Результат:

Exemple

Réduisons l'échelle de 2 fois sur les deux axes :

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(0.5);
}

Результат:

Exemple

Augmentons l'échelle de 2 fois sur l'axe X :

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(2, 1);
}

Результат:

Exemple

Augmentons l'échelle de 2 fois sur l'axe Y :

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1, 2);
}

Результат:

Voir aussi