skewY()
La fonction (en-US) CSS skewY()
permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. La valeur obtenue par cette fonction est de type <transform-function>
.
Exemple interactif
Cette transformation est une transvection dans laquelle 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 et loin de l'axe, plus le décalage obtenu sera important.
Syntaxe
skewY(a)
Valeurs
a
-
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 |
---|---|---|---|
[1 tan(a) 0 1 0 0] |
Exemples
HTML
<div>Normal</div>
<div class="skewed">Distordu</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skewY(40deg);
background-color: pink;
}
Résultat
Specifications
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-skewy |
Compatibilité des navigateurs
BCD tables only load in the browser