Ü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 (siehe deg).
rad
definiert einen Winkel in Radianten.  Ein voller Kries hat 2π Radianten, das entspricht etwa 6.2832rad. 1rad entspricht 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

Angle90.png

Ein Rechter Winkel: 90deg = 100grad = 0.25turn 1.5708rad

Angle180.png Ein flacher Winkel: 180deg = 200grad = 0.5turn 3.1416rad
AngleMinus90.png Ein Rechter Winkel (nach Links): -90deg = -100grad = -0.25turn -1.5708rad
Angle0.png

Ein Nullwinkel: 0deg = 0grad = 0turn = 0rad

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 2Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.6IE Vollständige Unterstützung 9Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
degChrome Vollständige Unterstützung 2Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.6IE Vollständige Unterstützung 9Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
gradChrome Vollständige Unterstützung 2Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.6IE Vollständige Unterstützung 9Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
radChrome Vollständige Unterstützung 2Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.6IE Vollständige Unterstützung 9Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
turnChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 13IE Vollständige Unterstützung 9Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 10WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 14Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 10Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, JankingDE, Sebastianz, fscholz
Zuletzt aktualisiert von: SJW,