Übersicht
Der CSS Datentyp <angle> steht für einen Winkel. Dieser kann positiv (rechts) oder negativ (links) sein. Ein Winkel besteht immer aus einer <number>, gefolgt von einer Einheit (deg, grad, rad or turn). Wie auch bei anderen Werten darf dazwischen kein Leerschlag sein.
Für statische Elemente können mehrere Schreibweisen zum selben Ergebniss führen (bspw. 90deg und -270deg oder 1turn und 4turn), bei dynamischen Eigenschaften wie zum Beispiel transition kann die Schreibweise jedoch eine Auswirkung auf den Effekt haben.
Die folgenden Einheiten können Verwendet werden:
deg- definiert einen Winkel in Grad. Ein voller Kreis hat
360deg. grad- definiert einen Winkel in Gon. Ein voller Kreis hat
400grad.Achtung: Nicht zu verwechseln mit Grad (siehedeg). rad- definiert einen Winkel in Radianten. Ein voller Kries hat 2π Radianten, das entspricht etwa
6.2832rad.1radentspricht 180/π Grad. turn- definiert einen Winkel in der Anzahl Umdrehungen. Ein voller Kreis besteht aus
1turn.
Alle Einheiten können auch den Wert 0 (0deg, 0grad, 0rad oder 0turn) annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt. Ein Wert ohne angabe einer Einheit (0) ist nicht zulässig.
Beispiele
 |
Ein Rechter Winkel: |
 |
Ein flacher Winkel: 180deg = 200grad = 0.5turn ≈ 3.1416rad |
 |
Ein Rechter Winkel (nach Links): -90deg = -100grad = -0.25turn ≈ -1.5708rad |
 |
Ein Nullwinkel: Hinweis:
0 ist kein gültiger Wert. |
Spezifikation
| Spezifikation | Status | Anmerkung |
|---|---|---|
| CSS Values and Units Module Level 3 Die Definition von '<angle>' in dieser Spezifikation. |
Anwärter Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
<angle> | Chrome Vollständige Unterstützung 2 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 3.6 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung 4 | WebView Android Vollständige Unterstützung Ja | Chrome Android Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung Ja | Samsung Internet Android Vollständige Unterstützung Ja |
deg | Chrome Vollständige Unterstützung 2 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 3.6 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung 4 | WebView Android Vollständige Unterstützung Ja | Chrome Android Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung Ja | Samsung Internet Android Vollständige Unterstützung Ja |
grad | Chrome Vollständige Unterstützung 2 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 3.6 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung 4 | WebView Android Vollständige Unterstützung Ja | Chrome Android Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung Ja | Samsung Internet Android Vollständige Unterstützung Ja |
rad | Chrome Vollständige Unterstützung 2 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 3.6 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung 4 | WebView Android Vollständige Unterstützung Ja | Chrome Android Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung Ja | Samsung Internet Android Vollständige Unterstützung Ja |
turn | Chrome Vollständige Unterstützung Ja | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 13 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung 10 | WebView Android Vollständige Unterstützung Ja | Chrome Android Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 14 | Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung 10 | Samsung Internet Android Vollständige Unterstützung Ja |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung