scale()

Exemple interactif

transform: scale(1);

transform: scale(0.7);

transform: scale(1.3, 0.4);

transform: scale(-0.5, 1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    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'une transformation 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 une symétrie centrale selon cette dimension. La valeur 1 n'a aucun effet.

Syntaxe

scale(sx)

scale(sx, sy)

Valeurs

sx

Un nombre (<number>) ou <percentage> représentant l'abscisse (composante horizontale, x) du vecteur d'échelle.

sy Facultatif

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 est sx, ce qui donne une mise à l'échelle uniforme qui préserve le rapport d'aspect de l'élément.

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édia prefers-reduced-motion — servez-vous-en pour écrire une requê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 :

• MDN Comprendre le WCAG, explications de la directive 2.3
• Comprendre le critère de succès 2.3.3 | W3C Understanding WCAG 2.1 ^(angl.)

Exemples

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

HTML

<div>Normal</div>
<div class="scaled">Mis à l'échelle</div>

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

<div>Normal</div>
<div class="scaled">Mis à l'échelle</div>

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;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété transform
• La propriété scale
• La propriété zoom
• Le type de donnée <transform-function>
• scale3d()
• Autres transformations individuelles : translate et rotate