Fonction skew
La fonction skew définit l'inclinaison d'un élément,
le transformant ainsi d'un rectangle
en un parallélogramme. Elle est utilisée conjointement
avec la propriété transform.
La valeur de la propriété est un angle dans n'importe quelle unité
d'angle. L'inclinaison est effectuée autour
du point défini par la propriété transform-origin.
Peut accepter un ou deux paramètres, séparés par une virgule. S'il y a deux paramètres - le premier définit l'inclinaison horizontale, et le second - l'inclinaison verticale. S'il n'y a qu'un seul paramètre - il définit l'inclinaison horizontale (et non pas sur les deux axes). Les paramètres peuvent être positifs ou négatifs.
Syntaxe
sélecteur {
transform: skew(un ou deux angles);
}
Exemple
Dans cet exemple, le bloc est incliné de 30
degrés vers la gauche :
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemple
Dans cet exemple, le bloc est incliné de 30
degrés vers la droite :
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemple
Dans cet exemple, le bloc est incliné de 30
degrés verticalement (valeur positive) :
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemple
Dans cet exemple, le bloc est incliné de 30
degrés verticalement (valeur négative) :
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemple
Définissons une inclinaison simultanée sur les axes X et Y :
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
