skewX()

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 skewX() définit une transformation qui incline un élément dans la direction horizontale sur le plan 2D. Son résultat est un type de donnée <transform-function>.

Exemple interactif

transform: skewX(0);

transform: skewX(35deg);

transform: skewX(-0.06turn);

transform: skewX(0.352rad);

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

Cette transformation est un cisaillement (transvection) qui déforme chaque point d'un élément selon un certain angle dans la direction horizontale. L'abscisse (coordonnée horizontale, x) de chaque point est modifiée d'une valeur proportionnelle à l'angle défini et à la distance à l'origine ; ainsi, plus un point est éloigné de l'origine, plus la valeur ajoutée sera grande.

Note : skewX(a) est équivalent à skew(a).

Syntaxe

css

skewX(a)

Valeurs

a: Un <angle> représentant l'angle à utiliser pour déformer l'élément selon l'abscisse (coordonnée horizontale, x).

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 & \tan(a) \\ 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & \tan(a) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 0 tan(a) 1 0 0]`

Formal syntax

<skewX()> = 
  skewX( [ <angle> | <zero> ] )

Examples

HTML

html

<div>Normal</div>
<div class="skewed">Incliné</div>

CSS

css

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

.skewed {
  transform: skewX(10deg); /* Équivaut à skew(10deg) */
  background-color: pink;
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi

La propriété transform
Le type de donnée <transform-function>
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