Type CSS `<angle>`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

Le type de donnée CSS <angle> représente une valeur d'angle exprimée en degrés, grades, radians ou tours. Il est utilisé, par exemple, dans les <gradient> et dans certaines fonctions transform.

Exemple interactif

transform: rotate(45deg);

transform: rotate(3.1416rad);

transform: rotate(-50grad);

transform: rotate(1.75turn);

<section class="default-example" id="default-example">
 <div class="transition-all" id="example-element">
 Cette boîte peut pivoter à différents angles.
 </div>
</section>

#example-element {
 background-color: #0118f3;
 padding: 0.75em;
 width: 180px;
 height: 120px;
 color: white;
}

Syntaxe

Le type <angle> se compose d'une valeur <number> suivie de l'une des unités listées ci-dessous. Comme pour toutes les dimensions, il n'y a pas d'espace entre le littéral de l'unité et le nombre. Bien que certaines utilisations héritées acceptent un 0 sans unité, vous devez toujours inclure une unité pour les valeurs nulles, par exemple : 0deg, 0grad, 0rad ou 0turn.

Il peut être précédé d'un seul signe + ou -. Les nombres positifs représentent des angles dans le sens horaire, tandis que les nombres négatifs représentent des angles dans le sens antihoraire. Pour les propriétés statiques d'une unité donnée, un angle peut être représenté par plusieurs valeurs équivalentes. Par exemple, 90deg équivaut à -270deg, et 1turn équivaut à 4turn. Pour les propriétés dynamiques, comme lors de l'application d'une animation ou d'une transition, l'effet obtenu est néanmoins différent.

Unités

deg: Représente un angle en degrés. Un cercle complet correspond à 360deg. Exemples : 0deg, 90deg, 14.23deg.
grad: Représente un angle en grades. Un cercle complet correspond à 400grad. Exemples : 0grad, 100grad, 38.8grad.
rad: Représente un angle en radians. Un cercle complet correspond à 2π radians (soit environ 6.2832rad). 1rad correspond à 180/π degrés. Exemples : 0rad, 1.0708rad, 6.2832rad.
turn: Représente un angle en nombre de tours. Un cercle complet correspond à 1turn. Exemples : 0turn, 0.25turn, 1.2turn.