<angle>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Der <angle>
CSS Datentyp repräsentiert einen Winkelwert, der in Grad, Neugrad, Radiant oder Umdrehungen ausgedrückt wird. Er wird beispielsweise in <gradient>
-Verläufen und in einigen transform
-Funktionen verwendet.
Probieren Sie es aus
Syntax
Der <angle>
-Datentyp besteht aus einer <number>
, gefolgt von einer der unten aufgeführten Einheiten. Wie bei allen Maßeinheiten gibt es keinen Abstand zwischen dem Einheitsliteral und der Zahl. Die Winkeleinheit ist nach der Zahl 0
optional.
Optional kann ein einzelnes +
- oder -
-Zeichen vorangestellt werden. Positive Zahlen repräsentieren Winkel im Uhrzeigersinn, während negative Zahlen Winkel gegen den Uhrzeigersinn darstellen. Für statische Eigenschaften einer gegebenen Einheit kann jeder Winkel durch verschiedene äquivalente Werte dargestellt werden. Zum Beispiel entsprechen 90deg
-270deg
und 1turn
entspricht 4turn
. Für dynamische Eigenschaften, wie bei Anwendung von animation
oder transition
, wird die Wirkung dennoch unterschiedlich sein.
Einheiten
deg
-
Repräsentiert einen Winkel in Grad. Ein voller Kreis entspricht
360deg
. Beispiele:0deg
,90deg
,14.23deg
. grad
-
Repräsentiert einen Winkel in Neugrad. Ein voller Kreis entspricht
400grad
. Beispiele:0grad
,100grad
,38.8grad
. rad
-
Repräsentiert einen Winkel in Radianten. Ein voller Kreis entspricht 2π Radianten, was ungefähr
6.2832rad
entspricht.1rad
entspricht 180/π Grad. Beispiele:0rad
,1.0708rad
,6.2832rad
. turn
-
Repräsentiert einen Winkel in einer Anzahl von Umdrehungen. Ein voller Kreis entspricht
1turn
. Beispiele:0turn
,0.25turn
,1.2turn
.
Beispiele
Einstellen eines rechtsläufigen rechten Winkels
![]() |
90deg = 100grad = 0.25turn ≈ 1.5708rad |
Einstellen eines flachen Winkels
![]() |
180deg = 200grad = 0.5turn ≈ 3.1416rad |
Einstellen eines gegen den Uhrzeigersinn verlaufenden rechten Winkels
![]() |
-90deg = -100grad = -0.25turn ≈ -1.5708rad |
Einstellen eines Nullwinkels
![]() |
0 = 0deg = 0grad = 0turn = 0rad |
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # angles |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- CSS-Datentypen
- Der
<gradient>
-Typ - CSS-Drehtransformationen:
rotate()
,rotate3d()
,rotateX()
,rotateY()
undrotateZ()
- CSS-Transformationen
- Verwendung von CSS-Transformationen
- Verwendung von CSS-Verläufen