La type de données CSS <angle> permet de représenter des angles exprimés en degrés, radians, grades ou tours. Les angles positifs sont des angles allant dans le sens horaire et les valeurs négatives sont des angles allant dans le sens anti-horaire. Les angles sont par exemples utilisés pour les transformations CSS (transform) ou les dégradés (<gradient>).

Syntaxe

Pour exprimer une valeur de ce type, on utilisera une valeur de type <number> (un nombre), immédiatement suivie d'une unité deg, grad, rad ou turn. Comme pour les autres dimensions présentes en CSS, il n'y a pas d'espace entre le littéral réservé à l'unité et le nombre qui indique la mesure de l'angle. L'unité est facultative pour la valeur 0 (bien qu'il soit recommandé d'écrire une unité pour des raisons de lisibilité et de cohérence). Il est possible d'utiliser un signe + ou - en préfixe.

Pour les propriétés statiques et pour une unité donnée, un même angle pourra être représenté par plusieurs valeurs, ainsi 90deg, -270deg, 1turn et 4turn représentent le même angle. En revanche, pour les propriétés dynamiques (par exemple transition sur transform), l'effet obtenu sera différent.

Unités

Pour représenter une valeur dans le type <angle>, on pourra utiliser les unités suivantes :

deg
Cette unité permet de représenter un angle exprimé en degrés. Un cercle complet correspondra à 360deg. Voici des valeurs pour l'exemple : 0deg, 90deg, 360deg.
grad
Cette unité permet de représenter un angle exprimé en grades. Un cercle complet correspondra à 400grad. Voici des valeurs pour l'exemple : 0grad, 100grad, 400grad.
rad
Cette unité permet de représenter un angle exprimé en radians. Un cercle complet correspondra à 2π radians (soit environ 6.2832rad). Un radian correspond à 180/π degrés. Voici des valeurs pour l'exemple : 0rad, 1.0708rad, 6.2832rad.
turn
Cette unité représente le nombre de tours qu'effectue l'angle. Un cercle complet correspondra à 1turn. Voici des valeurs pour l'exemple : 0turn, 0.25turn, 1turn.

Même si toutes les unités exprimeront une valeur nulle identique, l'unité doit être indiquée afin de lever l'ambiguïté entre un angle et une valeur de longueur (type <length>).

Exemples

Angle90.png

Un angle droit orienté dans le sens horaire : 90deg = 100grad = 0.25turn ≈ 1.5708rad

Angle180.png Un angle plat orienté dans le sens horaire : 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.png Un angle droit orienté dans le sens anti-horaire : -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png

Un angle nul : 0 = 0deg = 0grad = 0turn = 0rad

Note :Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.

Spécifications

Spécification État Commentaires
CSS Values and Units Module Level 3
La définition de '<angle>' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 2Edge Support complet 12Firefox Support complet 3.6IE Support complet 9Opera Support complet OuiSafari Support complet 4WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
degChrome Support complet 2Edge Support complet 12Firefox Support complet 3.6IE Support complet 9Opera Support complet OuiSafari Support complet 4WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
gradChrome Support complet 2Edge Support complet 12Firefox Support complet 3.6IE Support complet 9Opera Support complet OuiSafari Support complet 4WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
radChrome Support complet 2Edge Support complet 12Firefox Support complet 3.6IE Support complet 9Opera Support complet OuiSafari Support complet 4WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
turnChrome Support complet OuiEdge Support complet 12Firefox Support complet 13IE Support complet 9Opera Support complet OuiSafari Support complet 10WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 14Opera Android Support complet OuiSafari iOS Support complet 10Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Sebastianz, Prinz_Rana, fscholz, teoli, FredB, tregagnon
Dernière mise à jour par : SphinxKnight,