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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
La valeur obtenue par cette fonction est de type <transform-function>
.
Syntaxe
skew(ax) skew(ax, ay)
Valeurs
ax
- Une valeur de type
<angle>
qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). ay
- Une valeur de type
<angle>
qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).
Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
---|---|---|---|
[1 tan(ay) tan(ax) 1 0 0] |
Exemples
Utiliser une distorsion horizontale
HTML
<p>toto</p>
<p class="transformation">truc</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformation {
/* the same as skewX(10deg); */
transform: skew(10deg);
background-color: blue;
}
Résultat
Utiliser deux angles
HTML
<p>toto</p>
<p class="transformation">truc</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformation {
transform: skew(10deg, 10deg);
background-color: blue;
}
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Transforms Level 1 La définition de 'skew()' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
Voir la page sur le type de donnée <transform-function>
pour les informations de compatibilité associées.