Fonction CSS `scale()`

Baseline Large disponibilit

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.

En savoir plus
Voir la compatibilit complte

La fonction CSS scale() dfinit une transformation qui redimensionne un lment dans le plan 2D. Comme la quantit de mise l'chelle est dfinie par un vecteur [sx, sy], elle peut redimensionner les dimensions horizontale et verticale des chelles diffrentes. Son rsultat est un type de donne <transform-function>.

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 caractrise par un vecteur bidimensionnel. Ses coordonnes dfinissent l'ampleur de la mise l'chelle dans chaque direction. Si les deux coordonnes sont gales, la mise l'chelle est uniforme (isotrope) et le rapport d'aspect de l'lment est prserv (il s'agit d'une transformation homothtique).

Lorsqu'une valeur de coordonne est en dehors de l'intervalle [-1, 1], l'lment grandit selon cette dimension ; lorsqu'elle est l'intrieur, il rtrcit. Une valeur ngative entrane une symtrie centrale selon cette dimension. La valeur 1 n'a aucun effet.

Note : La fonction scale() ne met l'chelle qu'en 2D. Pour une mise l'chelle en 3D, utilisez plutt scale3d().

Syntaxe

css

scale(sx)

scale(sx, sy)

Valeurs

sx: Un nombre (<number>) ou <percentage> reprsentant l'abscisse (composante horizontale, x) du vecteur d'chelle.
sy Facultatif: Un nombre (<number>) ou <percentage> reprsentant l'ordonne (composante verticale, y) du vecteur d'chelle. Si elle n'est pas dfinie, sa valeur par dfaut est sx, ce qui donne une mise l'chelle uniforme qui prserve le rapport d'aspect de l'lment.

Coordonnes cartsiennes sur ^2 (angl.)	Coordonnes homognes sur ^2	Coordonnes cartsiennes sur ^3 (angl.)	Coordonnes homognes sur ^3 (angl.)
(sx00sy)\left( \begin{array}{cc} sx & 0 \\ 0 & sy \end{array} \right)	(sx000sy0001)\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)	(sx000sy0001)\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)	(sx0000sy0000100001)\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>? )

Cette syntaxe reflte le dernier standard selon CSS Transforms Module Level 1. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Accessibilit

Les animations de mise l'chelle ou de zoom posent des problmes d'accessibilit, car elles dclenchent frquemment certains types de migraines. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un contrle permettant aux utilisateurices de les dsactiver, de prfrence l'chelle du site.

Pensez aussi utiliser la fonctionnalit mdia prefers-reduced-motion servez-vous-en pour crire une requte mdia qui dsactivera les animations si l'utilisateurice a activ la rduction des animations dans ses prfrences systme.

Pour en savoir plus :

Exemples

Mise l'chelle conjointe des dimensions X et Y

HTML

html

<div>Normal</div>
<div class="scaled">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;
}

Rsultat

Mise l'chelle spare des dimensions X et Y, et dplacement de l'origine

HTML

html

<div>Normal</div>
<div class="scaled">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;
}