Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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.
LafonctionCSSskewX() 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> <img 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
skewX(a)Valeurs
aUn
<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.) |
|---|---|---|---|
[1 0 tan(a) 1 0 0] |
Formal syntax
<skewX()> =
skewX([<angle>|<zero>])
Examples
HTML
<div>Normal</div><div>Incliné</div>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 :