skew()

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

transform: skew(0);

transform: skew(15deg, 15deg);

transform: skew(-0.06turn, 18deg);

transform: skew(0.312rad);

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

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.

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

Exemples

Utiliser une distorsion horizontale

HTML

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

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

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

CSS

body {
 margin: 20px;
}
div {
 width: 80px;
 height: 80px;
 background-color: skyblue;
}
.skewed {
 transform: skew(10deg, 10deg);
 background-color: pink;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• transform
• <transform-function>
• skewX()
• skewY()