scaleX()

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 scaleX() définit une transformation qui redimensionne un élément selon l'axe des abscisses (horizontalement). Son résultat est de type <transform-function>.

Exemple interactif

transform: scaleX(1);

transform: scaleX(0.7);

transform: scaleX(1.3);

transform: scaleX(-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'abscisse (coordonnée horizontale, x) 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 généralement pas conservés, sauf pour les multiples de 90 degrés. scaleX(-1) définit une symétrie axiale, avec un axe vertical passant par l'origine (tel que défini par la propriété transform-origin).

Note : scaleX(sx) est équivalent à scale(sx, 1) ou scale3d(sx, 1, 1).

Syntaxe

css

scaleX(s)

Valeurs

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

Syntaxe formelle

<scaleX()> = 
  scaleX( <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: scaleX(0.6);
  background-color: pink;
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi

La fonction scaleY()
La fonction scaleZ()
La propriété transform
La propriété scale
Le type de donnée <transform-function>
La propriété transform-origin
Autres propriétés individuelles de transformation :
- translate
- 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