skew()
La fonction skew() permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. 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, plus le décalage obtenu sera important.La fonction skew() peut prendre une ou deux valeurs. Avec une seule valeur, la fonction skew() est équivalente à la fonction skewx().
- αx représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).
- αy représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).
skew(αx, αy) est éuivalent à skewx(αx) skewy(αy)
<style>
.fond {
width: 300px;
height: 300px;
border: 1px dotted black;
}
.carre {
position: relative;
width: 150px;
height: 150px;
top: 75px;
left: 75px;
background-color: cyan;
}
.carre#skw {
transform: skew(30deg, 45deg);
}
</style>
<div class="fond">
<div class="carre"></div>
</div>
<br>
<div class="fond">
<div class="carre" id="skw"></div>
</div>