scale()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

Lafonction CSSscale() définit une transformation qui redimensionne un élément dans le plan 2D. Comme la quantité de mise à l'échelle est définie par un vecteur [sx, sy], elle peut redimensionner les dimensions horizontale et verticale à des échelles différentes. Son résultat est un type de donnée<transform-function>.

Exemple interactif

transform: scale(1);

transform: scale(0.7);

transform: scale(1.3, 0.4);

transform: scale(-0.5, 1);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

Cette transformation de mise à l'échelle est caractérisée par un vecteur bidimensionnel. Ses coordonnées définissent l'ampleur de la mise à l'échelle dans chaque direction. Si les deux coordonnées sont égales, la mise à l'échelle est uniforme (isotrope) et le rapport d'aspect de l'élément est préservé (il s'agit d'unetransformation homothétique).

Lorsqu'une valeur de coordonnée est en dehors de l'intervalle [-1, 1], l'élément grandit selon cette dimension ; lorsqu'elle est à l'intérieur, il rétrécit. Une valeur négative entraîne unesymétrie centrale selon cette dimension. La valeur1 n'a aucun effet.

Note :La fonctionscale() ne met à l'échelle qu'en 2D. Pour une mise à l'échelle en 3D, utilisez plutôtscale3d().

Syntaxe

css

scale(sx)scale(sx, sy)

Valeurs

sx: Un nombre (<number>) ou<percentage> représentant l'abscisse (composante horizontale, x) du vecteur d'échelle.
syFacultatif: Un nombre (<number>) ou<percentage> représentant l'ordonnée (composante verticale, y) du vecteur d'échelle. Si elle n'est pas définie, sa valeur par défaut estsx, ce qui donne une mise à l'échelle uniforme qui préserve lerapport d'aspect de l'élément.

Coordonnées cartésiennes surℝ^2^(angl.)	Coordonnées homogènes surℝℙ^2	Coordonnées cartésiennes surℝ^3^(angl.)	Coordonnées homogènes surℝℙ^3^(angl.)
$(\begin{matrix} sx & 0 \\ 0 & sy \end{matrix}) \left( \begin{array}{cc} sx & 0 \\ 0 & sy \end{array} \right)$	$(\begin{matrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix}) \left( \begin{array}{cccc} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[sx 0 0 sy 0 0]`

Syntaxe formelle

<scale()> =
scale(<number> ,<number>?)

Accessibilité

Les animations de mise à l'échelle ou de zoom posent des problèmes d'accessibilité, car elles déclenchent fréquemment certains types de migraines. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un contrôle permettant aux utilisateur·ices de les désactiver, de préférence à l'échelle du site.

Pensez aussi à utiliser la fonctionnalité médiaprefers-reduced-motion — servez-vous-en pour écrire unerequête média qui désactivera les animations si l'utilisateur·ice a activé la réduction des animations dans ses préférences système.

Pour en savoir plus :

Exemples

Mise à l'échelle conjointe des dimensions X et Y

HTML

html

<div>Normal</div><div>Mis à l'échelle</div>

CSS

css

div {  width: 80px;  height: 80px;  background-color: skyblue;}.scaled {  transform: scale(0.7); /* Équivaut à scaleX(0.7) scaleY(0.7) */  background-color: pink;}

Résultat

Mise à l'échelle séparée des dimensions X et Y, et déplacement de l'origine

HTML

html

<div>Normal</div><div>Mis à l'échelle</div>

CSS

css

div {  width: 80px;  height: 80px;  background-color: skyblue;}.scaled {  transform: scale(2, 0.5); /* Équivaut à scaleX(2) scaleY(0.5) */  transform-origin: left;  background-color: pink;}