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
css
skewY(a)
Valeurs
Exemples
HTML
html
<div>Normal</div>
<div class="skewed">Distordu</div>
CSS
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