<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, Gon, Radianten oder Umdrehungen ausgedrückt wird. Er wird beispielsweise in <gradient>s und in einigen transform-Funktionen verwendet.

Probieren Sie es aus

Syntax

Der <angle>-Datentyp besteht aus einem <number>, gefolgt von einer der unten aufgeführten Einheiten. Wie bei allen Dimensionen gibt es keinen Leerraum zwischen der Einheit und der Zahl. Die Winkeleinheit ist nach der Zahl 0 optional.

Optional kann ein einzelnes +- oder --Vorzeichen vorangestellt sein. Positive Zahlen repräsentieren Winkel im Uhrzeigersinn, während negative Zahlen Winkel gegen den Uhrzeigersinn darstellen. Für statische Eigenschaften einer gegebenen Einheit können Winkel durch verschiedene äquivalente Werte dargestellt werden. Zum Beispiel entspricht 90deg -270deg, und 1turn entspricht 4turn. Für dynamische Eigenschaften, wie bei der Anwendung einer animation oder transition, kann der Effekt jedoch 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 Gon. Ein voller Kreis entspricht 400grad. Beispiele: 0grad, 100grad, 38.8grad.

rad

Repräsentiert einen Winkel in Radianten. Ein voller Kreis entspricht 2π Radianten, was etwa 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

Einstellung eines rechten Winkels im Uhrzeigersinn

Ein Diagramm, das eine 90-Grad-Drehung im Uhrzeigersinn entlang eines Kreises zeigt, indem man sich vom oberen Punkt zum rechten Punkt bewegt. 90deg = 100grad = 0.25turn ≈ 1.5708rad

Einstellung eines geraden Winkels

Ein Diagramm, das eine 180-Grad-Drehung im Uhrzeigersinn entlang eines Kreises zeigt, indem man sich vom oberen Punkt zum unteren Punkt bewegt. 180deg = 200grad = 0.5turn ≈ 3.1416rad

Einstellung eines rechten Winkels gegen den Uhrzeigersinn

Ein Diagramm, das eine -90-Grad-Drehung gegen den Uhrzeigersinn entlang eines Kreises zeigt, indem man sich vom oberen Punkt zum linken Punkt bewegt. -90deg = -100grad = -0.25turn ≈ -1.5708rad

Einstellung eines Nullwinkels

Ein Diagramm, das eine 0-Grad-Drehung zeigt. Es gibt keine Bewegung. 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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<angle>
deg
grad
rad
turn

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch