skew()
, skewX()
et skewY()
- Fonctions CSS
Résumé des caractéristiques de la fonction skew()
Description des fonctions skew()
, skewX()
et skewX()
.
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 :
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
ety
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 CSS 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.
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.
skew()
.
skewX()
et skewY()
.
skew()
skewX()
skewY()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que skew()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. skew()
fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.