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

BCD tables only load in the browser

Voir aussi