<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

Ein Diagramm zeigt eine rechtsläufige 90-Grad-Drehung entlang eines Kreises durch Bewegung vom oberen Punkt zum rechten Punkt. 90deg = 100grad = 0.25turn ≈ 1.5708rad

Einstellen eines flachen Winkels

Ein Diagramm zeigt eine rechtsläufige 180-Grad-Drehung entlang eines Kreises durch Bewegung vom oberen Punkt zum untersten Punkt. 180deg = 200grad = 0.5turn ≈ 3.1416rad

Einstellen eines gegen den Uhrzeigersinn verlaufenden rechten Winkels

Ein Diagramm zeigt eine gegen den Uhrzeigersinn verlaufende 90-Grad-Drehung entlang eines Kreises durch Bewegung vom oberen Punkt zum linken Punkt. -90deg = -100grad = -0.25turn ≈ -1.5708rad

Einstellen eines Nullwinkels

Ein Diagramm zeigt eine 0-Grad-Drehung. Es gibt keine Bewegung. 0 = 0deg = 0grad = 0turn = 0rad

Spezifikationen

Specification
CSS Values and Units Module Level 4
# angles

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch