scaleY()

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⁩.

La fonction CSS scaleY() définit une transformation qui redimensionne un élément selon l'axe des ordonnées (verticalement). Son résultat est de type <transform-function>.

Exemple interactif

transform: scaleY(1);

transform: scaleY(0.7);

transform: scaleY(1.3);

transform: scaleY(-0.5);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Elle modifie l'ordonnée (coordonnée verticale, y) de chaque point de l'élément par un facteur constant, sauf lorsque le facteur d'échelle vaut 1, auquel cas il n'y a pas de transformation. La mise à l'échelle n'est pas isotrope et les angles de l'élément ne sont pas conservés. scaleY(-1) définit une symétrie axiale, avec un axe horizontal passant par l'origine (tel que défini par la propriété transform-origin).

Note : scaleY(sy) est équivalent à scale(1, sy) ou scale3d(1, sy, 1).

transform: rotateX(180deg); === transform: scaleY(-1);

Syntaxe

css

scaleY(s)

Valeurs

s: Est un nombre (<number>) représentant le facteur d'échelle à appliquer sur l'ordonnée (coordonnée verticale, y) de chaque point 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.)
$\left( \begin{array}{cc} 1 & 0 \\ 0 & s \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & s & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & s & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & s & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 0 0 s 0 0]`

Syntaxe formelle

<scaleY()> = 
  scaleY( <number> )

Exemples

HTML

html

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

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleY(0.6);
  background-color: pink;
}

Résultat

Spécifications

Specification
CSS Transforms Module Level 1 # funcdef-transform-scaley

Compatibilité des navigateurs

Voir aussi

La fonction scaleX()
La fonction scaleZ()
La propriété transform
Le type de donnée <transform-function>
La propriété transform-origin
Propriétés de transformation individuelles :
- translate
- scale
- rotate
- Remarque : il n'existe pas de propriété skew

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨26 nov. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content