skew()
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 skew() définit une transformation qui incline un élément dans le plan 2D. Son résultat est de type <transform-function>.
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>
Cette transformation est une application de cisaillement (transvection) qui déforme chaque point d'un élément selon un certain angle dans les directions horizontale et verticale. L'effet est similaire à celui d'étirer chaque coin de l'élément selon un certain angle.
Les coordonnées de chaque point sont modifiées 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 est grande.
Syntaxe
skew(ax)
skew(ax, ay)
Valeurs
ax-
Est un
<angle>représentant l'angle à utiliser pour incliner l'élément selon l'axe des abscisses (x). ayFacultatif-
Est un
<angle>représentant l'angle à utiliser pour incliner l'élément selon l'axe des ordonnées (y). Si non défini, sa valeur par défaut est0, ce qui donne un cisaillement purement horizontal.
| 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.) |
|---|---|---|---|
|
|
|
|
|
[1 tan(ay) tan(ax) 1 0 0] |
Syntaxe formelle
<skew()> =
skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
Exemples
Inclinaison selon l'axe x uniquement
HTML
<div>Normal</div>
<div class="skewed">Incliné</div>
CSS
body {
margin: 20px;
}
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg); /* Équivaut à skewX(10deg) */
background-color: pink;
}
Résultat
Inclinaison sur les deux axes
HTML
<div>Normal</div>
<div class="skewed">Incliné</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
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-skew |