Convertir un angle CSS en degré, radian, grade/gradian ou tour (turn) :

Convertisseur d'angle Css:

Résultats :
Angle en degrés : 30 °
Angle en radians : 1.570796 rad
Angle en grades : 100 gon
Angle en tours : 0.25 tr

Résultats pour les CSS :
Angle en degrés : 30deg
Angle en radians : 1.570796rad
Angle en gradian : 100grad
Angle en tours : 0.25turn
Angle allant dans le sens horaire
Tangente : 0.57735
Cosinus : 0.866025
Sinus : 0.5

Canvas n'est pas implémenté dans ce navigateur. Vous devez utiliser un navigateur compatible HTML5 pour visualiser ce dessin.

Les unités d'angle en CSS

Pour spécifier un angle en CSS, vous devez mettre un nombre suivi immédiatement d'une unité d'angle CSS. Quatre unités d'angle sont autorisées en CSS :

Les angles positifs en CSS sont des angles allant dans le sens horaire et les angles négatifs en CSS sont des angles allant dans le sens anti-horaire.
Pour les exemples d'angles donnés ci-dessous, les angles correspondent dans l'ordre à un angle de 0deg, de 45deg, de 90deg et de 360deg.

Equivalence entre le degré, le radian, le gradian et le tour (turn).

Voici les équivalences entre le degré, le radian, le gradian et turn en se basant sur un tour de cercle complet.
D'une manière générale :
1 tr = 360° = 2π rad = 400 gon
Soit avec les unités CSS :
1 turn = 360 deg = 2π rad = 400 grad

Autres angles convertis pour le Css en deg, rad, grad ou turn, Tangente, Cosinus, Sinus

Equivalences d'unité Css converties en deg / °, rad, grad / gon, turn / tr
Degrés Radians Grades Tours Tangente Cosinus Sinus
0deg0rad0grad0turn010
10deg0.174533rad11.111111grad0.027778turn0.1763270.9848080.173648
20deg0.349066rad22.222222grad0.055556turn0.363970.9396930.34202
30deg0.523599rad33.333333grad0.083333turn0.577350.8660250.5
40deg0.698132rad44.444444grad0.111111turn0.83910.7660440.642788
50deg0.872665rad55.555556grad0.138889turn1.1917540.6427880.766044
60deg1.047198rad66.666667grad0.166667turn1.7320510.50.866025
70deg1.22173rad77.777778grad0.194444turn2.7474770.342020.939693
80deg1.396263rad88.888889grad0.222222turn5.6712820.1736480.984808
90deg1.570796rad100grad0.25turn---
100deg1.745329rad111.111111grad0.277778turn---
110deg1.919862rad122.222222grad0.305556turn---
120deg2.094395rad133.333333grad0.333333turn---
130deg2.268928rad144.444444grad0.361111turn---
140deg2.443461rad155.555556grad0.388889turn---
150deg2.617994rad166.666667grad0.416667turn---
160deg2.792527rad177.777778grad0.444444turn---
170deg2.96706rad188.888889grad0.472222turn---
180deg3.141593rad200grad0.5turn---
190deg3.316126rad211.111111grad0.527778turn---
200deg3.490659rad222.222222grad0.555556turn---
210deg3.665191rad233.333333grad0.583333turn---
220deg3.839724rad244.444444grad0.611111turn---
230deg4.014257rad255.555556grad0.638889turn---
240deg4.18879rad266.666667grad0.666667turn---
250deg4.363323rad277.777778grad0.694444turn---
260deg4.537856rad288.888889grad0.722222turn---
270deg4.712389rad300grad0.75turn---
280deg4.886922rad311.111111grad0.777778turn---
290deg5.061455rad322.222222grad0.805556turn---
300deg5.235988rad333.333333grad0.833333turn---
310deg5.410521rad344.444444grad0.861111turn---
320deg5.585054rad355.555556grad0.888889turn---
330deg5.759587rad366.666667grad0.916667turn---
340deg5.934119rad377.777778grad0.944444turn---
350deg6.108652rad388.888889grad0.972222turn---
360deg6.283185rad400grad1turn---

Angle CSS en degré (deg).

L'unité d'angle CSS pour un angle exprimé en degrés est deg.
Un tour de cercle complet correspond à 360deg.
Voici des valeurs en deg pour l'exemple : 0deg, 45deg, 90deg, 360deg.

.rotate_degre{
  -webkit-transform : (30deg);
  -moz-transform : rotate(30deg);
  -ms-transform : rotate(30deg);
  -o-transform : rotate(30deg);
   : rotate(30deg);
  /* (0.866025, 0.5, -0.5, 0.866025 ,0 ,0) */
}
.skewy_degre{
  -webkit-transform : (30deg);
  -moz-transform : skewY(30deg);
  -ms-transform : skewY(30deg);
  -o-transform : skewY(30deg);
   : skewY(30deg);
  /* (1, 0.577351, 0, 1, 0, 0) */
}
.hue-rotate_angle_degre{
  -webkit-filter : (30deg);
   : hue-rotate(30deg);
}
image avec un CSS filter:hue-rotate() en degres

Angle CSS en radian (rad).

L'unité d'angle CSS pour un angle exprimé en radians est rad.
Un tour de cercle complet correspond à 2π radians soit environ 6.2832rad.
Voici des valeurs en rad pour l'exemple : 0rad, 0.7854rad, 1.0708rad, 6.2832rad.

.rotate_radian{
  -webkit-transform : (0.523599rad);
  -moz-transform : rotate(0.523599rad);
  -ms-transform : rotate(0.523599rad);
  -o-transform : rotate(0.523599rad);
   : rotate(0.523599rad);
  /* (0.866025, 0.5, -0.5, 0.866025 ,0 ,0) */
}
.skew_radian{
  -webkit-transform : (0.523599rad,0.523599rad);
  -moz-transform : skew(0.523599rad,0.523599rad);
  -ms-transform : skew(0.523599rad,0.523599rad);
  -o-transform : skew(0.523599rad,0.523599rad);
   : skew(0.523599rad,0.523599rad);
  /* (1, 0.577351, 0.577351, 1, 0, 0) */
}
.hue-rotate_angle_radian{
  -webkit-filter : (0.523599rad);
   : hue-rotate(0.523599rad);
}
image avec un CSS filter:hue-rotate() en radians

Angle CSS en gradian (grad).

L'unité d'angle CSS pour un angle exprimé en gradians est grad.
Un tour de cercle complet correspond à 400grad.
Voici des valeurs en grad pour l'exemple : 0grad, 50grad, 100grad, 400grad.

.rotate_gradian{
  -webkit-transform : (33.333333grad);
  -moz-transform : rotate(33.333333grad);
  -ms-transform : rotate(33.333333grad);
  -o-transform : rotate(33.333333grad);
   : rotate(33.333333grad);
  /* (0.866025, 0.5, -0.5, 0.866025 ,0 ,0) */
}
.skewx_gradian{
  -webkit-transform : (33.333333grad);
  -moz-transform : skewX(33.333333grad);
  -ms-transform : skewX(33.333333grad);
  -o-transform : skewX(33.333333grad);
   : skewX(33.333333grad);
  /* (1, 0, 0.577351, 1, 0, 0) */
}
.hue-rotate_angle_gradian{
  -webkit-filter : (33.333333grad);
   : hue-rotate(33.333333grad);
}
image avec un CSS filter:hue-rotate() en gradians

Angle CSS en tour (turn).

L'unité d'angle CSS pour un angle exprimé en turns est turn.
Un tour de cercle complet correspond à 1turn.
Voici des valeurs en turn pour l'exemple : 0turn, 1.125turn, 0.25turn, 1turn.

.rotate_turn{
  -webkit-transform : (0.083333turn);
  -moz-transform : rotate(0.083333turn);
  -ms-transform : rotate(0.083333turn);
  -o-transform : rotate(0.083333turn);
   : rotate(0.083333turn);
  /* (0.866025, 0.5, -0.5, 0.866025 ,0 ,0) */
}
.skew_turn{
  -webkit-transform : (0.083333turn,0.083333turn);
  -moz-transform : skew(0.083333turn,0.083333turn);
  -ms-transform : skew(0.083333turn,0.083333turn);
  -o-transform : skew(0.083333turn,0.083333turn);
   : skew(0.083333turn,0.083333turn);
  /* (1, 0.577351, 0.577351, 1, 0, 0) */
}
.hue-rotate_angle_turn{
  -webkit-filter : (0.083333turn);
   : hue-rotate(0.083333turn);
}
image avec un CSS filter:hue-rotate() en turns

Compatibilités naviagteurs

Unité d'angle Css degré, radian et gradian

deg, rad et grad est compatible avec le navigateur Chrome 2+
Chrome 2+
deg, rad et grad est compatible avec le navigateur FireFox 3.6+
FireFox 3.6+
deg, rad et grad est compatible avec le navigateur Safari 4+
Safari4+
deg, rad et grad est compatible avec le navigateur Internet Explorer 9+
Internet Expl. 9+
deg, rad et grad est compatible avec le navigateur Opera
Opera

Unité d'angle Css turn

turn est compatible avec le navigateur Chrome 2+
Chrome 2+
turn est compatible avec le navigateur FireFox 13+
FireFox 13+
turn est compatible avec le navigateur Safari 5+
Safari 5+
deg, rad et grad est compatible avec le navigateur Internet Explorer 9+
Internet Expl. 9+
turn est compatible avec le navigateur Opera 25+
Opera 25+