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