`Skew()` - Fonction CSS

- skewX()

Définit une inclinaison de l'élément suivant l'axe X.

- skewY()

Définit une inclinaison de l'élément suivant l'axe Y.

skew()

skewX()

skewY()

Résumé des caractéristiques de la fonction `skew()`

Description rapide

Définit une inclinaison de l'élément suivant les axes X et/ou Y.

Statut

Standard

Pourcentages

Ne s'appliquent pas.

Module W3C

Module CSS - Transformations

Références (W3C)

CSS Transforms Module Level 1

Statut du document: CR (document candidat à la recommandation)

Description des fonctions `skew()`, `skewX()` et `skewY()`.

La fonction skew() définit l'inclinaison à appliquer à l'élément suivant l'axe X et/ou l'axe Y. Elle peut donc remplacer les deux autres fonctions qui définissent l'inclinaison sur un seul des axes X ou Y.
La fonction skewZ() n'est pas définie.

Voici comment doivent être comprises les valeurs angulaires utilisées pour l'inclinaison d'un élément :

Inclinaison avec la fonction skewX()

✗

Néanmoins le W3C recommande maintenant de ne plus utiliser skew(), de préférer plutôt l'utilisation des deux fonctions skewX() et skewY(). Voir CSS Transforms Module Level 1.
Néanmoins le résultat obtenu avec les mêmes valeurs d'angles est différent, comme on peut le voir sur l'exemple ci-après.

transform:skew(30deg,30deg);

transform:skewX(30deg) skewY(30deg);

Ces fonctions peut être utilisées avec :

transform : Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).

Syntaxe.

transform: skewX(10deg); x transform: skewY(20deg); y transform: skew(10deg, 20deg); x y

x et y définissent l'angle de l'inclinaison à appliquer à l'élément.

Ce sont deux valeurs numériques suivies de leur unité angulaire (voir les unités d'angle). Les valeurs peuvent être positives ou négatives en excluant 90deg et 270deg, ainsi que leurs multiples.

Si une seule valeur est indiquée pour la fonction skew(), elle correspond à l'inclinaison suivant l'axe X, l'inclinaison suivant l'axe Y étant fixée à 0.

Simulateur avec la fonction `skew()`.

transform :

skew( 0deg, 0deg )

skew( 30deg, 0deg )

skew( 0deg, 30deg )

Résultat

Compatibilité et prise en charge par les navigateurs.

Les transformations en 2D ne présentent plus de problème avec les navigateurs actuels. Il en est de même pour les fonctions CSS permettant de définir ces transformations.

Colonne 1

Prise en charge générale des transformation 2D, incluant les rotations, les translations d'éléments, etc.

Colonne 2

Support de la fonction skew() qui, utilisée avec la propriété transform, provoque une inclinaison de l'élément.

Colonne 3

Support des fonctions skewX() et skewY() qui, utilisées avec la propriété transform inclinent l'élément horizontalement ou verticalement.

Remarques :

(1) Ne supporte pas les transformations 2D sur les éléments SVG. Utilisez l'attribut transform à la place.

Transformations
2D

Fonction
skew()

Fonctions

skewX()
skewY()

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `skew()`.

Module CSS - Transformations - Niveau 1

Premier niveau de spécification concernant les transformations en 2D.
Présentation des différentes fonctions de transformation dont skew(), skewX() et skewY().
skew() est déclarée obsolète mais conservée pour des raisons de compatibilité.

28 Février 2012
Document de travail.
14 Février 2019
Candidat à la recommandation.
Module CSS - Transformations - Niveau 2

Niveau 2 de la spécification sur les transformations, introduisant les transformations en 3D.
Pas de changement concernant directement les fonctions 2D skew(), skewX() et skewY().

03 Mars 2020
Document de travail.

Voir aussi, concernant les transformations.

Le module de spécification CSS Transforms Module regroupe toutes les propriétés et fonctions concernant les transformations en CSS. Les fonctions skew(), skewX() et skewY() sont décrites dans ce module, ainsi que toutes les suivantes :