skew()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

La fonction skew() permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important.

Exemple interactif

La valeur obtenue par cette fonction est de type <transform-function>.

Syntaxe

La fonction skew() s'utilise avec une ou deux valeurs qui représente l'intensité de la distorsion appliquée dans chaque direction. Si une seule valeur est fournie, elle sera utilisée pour la distorsion sur l'axe horizontal et il n'y aura pas de distorsion verticale.

css
skew(ax)

skew(ax, ay)

Valeurs

ax

Une valeur de type <angle> qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).

ay

Une valeur de type <angle> qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).

Coordonnées cartésiennes sur ℝ2 Coordonnées homogènes sur ℝℙ2 Coordonnées cartésiennes sur ℝ3 Coordonnées homogènes sur ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]

Exemples

Utiliser une distorsion horizontale

HTML

html
<div>Normal</div>
<div class="skewed">Distordu</div>

CSS

css
body {
  margin: 20px;
}

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

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

Résultat

Utiliser deux angles

HTML

html
<div>Normal</div>
<div class="skewed">Distordu</div>

CSS

css
body {
  margin: 20px;
}

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

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
skew()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Voir aussi