skewY()
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 skewY() définit une transformation qui incline un élément dans la direction verticale sur le plan 2D. Son résultat est un type de donnée <transform-function>.
Exemple interactif
transform: skewY(0);
transform: skewY(35deg);
transform: skewY(-0.06turn);
transform: skewY(0.352rad);
<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 un cisaillement (transvection) qui déforme chaque point d'un élément selon un certain angle dans la direction verticale. L'ordonnée (coordonnée verticale, y) 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.
Syntaxe
skewY(a)
Valeurs
a-
Un
<angle>représentant l'angle à utiliser pour déformer l'élément selon l'ordonnée (coordonnée verticale, y).
| 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(a) 0 1 0 0] |
Syntaxe formelle
<skewY()> =
skewY( [ <angle> | <zero> ] )
Exemples
HTML
<div>Normal</div>
<div class="skewed">Incliné</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skewY(40deg);
background-color: pink;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-skewy |
Compatibilité des navigateurs
Voir aussi
- La propriété
transform - Le type de donnée
<transform-function> - Propriétés de transformation individuelles :