skewy()
La fonction skewy() permet d'opérer une distorsion horizontale en étirant chaque point de l'élément d'un certain angle dans la direction vertcale. Pour cela, 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.La fonction skewy() possède une valeur α qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).
<style>
.fond {
width: 300px;
height: 300px;
border: 1px dotted black;
}
.carre {
position: relative;
width: 150px;
height: 150px;
top: 75px;
left: 75px;
background-color: yellow;
}
.carre#skw {
transform: skewy(45deg);
}
</style>
<div class="fond">
<div class="carre"></div>
</div>
<br>
<div class="fond">
<div class="carre" id="skw"></div>
</div>