angle

par 3 contributeurs :

Résumé

Le type de donnée CSS <angle> représentes les valeurs angulaires. Les angles positifs représentent un angle à droite, tandis que les angles négatifs représentent des angles à gauche. Sa syntaxe est une donnée <number> immédiatement suivie par l'unité (deg, grad, rad ou turn). Comme toutes les autres dimensions en CSS, il n'y a pas d'espace entre l'unité et le chiffre.

Pour des propriétés statiques et une unité donnée, un angle peut être représenté par différentes valeurs : 90deg et -270deg représentent la même position finale, tout comme 1turn et 4turn. Pour des propriétés dynamiques, comme lorsqu'une transition est appliquée sur la propriété transform, l'effet sera différent.

Les unités suivantes peuvent être utilisées :

  • deg qui représente un angle en degrés. Un cercle complet fait 360deg. Par. ex. 0deg, 90deg, 360deg.
  • grad qui représente un angle en gradians. Un cercle complet fait 400grad. Par. ex. 0grad, 100grad, 400grad.
  • rad qui représente un angle en radians. Un cercle complet fait 2π radians ce qui vaut approximativement à 6.2832rad. 1rad vaut 180/π degrés. Par. ex. 0rad, 1.0708rad, 6.2832rad.
  • turn qui représente le nombre de tours que l'angle fait. Un cercle complet fait 1turn. Par ex. 0turn, 0.25turn, 1turn.

Même si toutes les unités donnent la même représentation pour la valeur 0, l'unité ne peut pas être omise puisqu'il ne s'agit pas d'une <longueur>. En d'autres termes, 0 est invalide et ne représente pas 0deg, 0grad, 0rad ou 0turn.

Exemples

Angle90.png

Un angle droit : 90deg = 100grad = 0.25turn 1.0708rad

Angle180.png Un angle plat : 180deg = 200grad = 0.5turn 2.1416rad
AngleMinus90.png Un angle droit (à gauche) : -90deg = -100grad = -0.25turn -1.0708rad
Angle0.png

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

Note : 0 n'est pas une valeur angulaire valide.

Spécifications

Spécification État Commentaire
CSS Values and Units Module Level 3 Candidate Recommendation  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 2 (528.17) 3.6 (1.9.2) 9.0 Pas de support 4.0 (528.17)
unité turn Pas de support 13.0 9.0 Pas de support Pas de support
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base ? (Oui) ? Pas de support ?
unité turn Pas de support 13.0 ? Pas de support Pas de support

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, FredB, tregagnon
Dernière mise à jour par : teoli,
Masquer la barre latérale