<angle>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Der <angle> CSS Datentyp repräsentiert einen Winkelwert, der in Grad, Gon, Radiant oder Umdrehungen ausgedrückt wird. Er wird zum Beispiel in <gradient>s und in einigen transform-Funktionen verwendet.

Probieren Sie es aus

transform: rotate(45deg);

transform: rotate(3.1416rad);

transform: rotate(-50grad);

transform: rotate(1.75turn);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This box can rotate to different angles.
  </div>
</section>

#example-element {
  background-color: #0118f3;
  padding: 0.75em;
  width: 180px;
  height: 120px;
  color: white;
}

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 dem Einheitenliteral und der Zahl. Die Winkeleinheit ist nach der Zahl 0 optional.

Optional kann ein einzelnes + oder - Zeichen vorangestellt werden. Positive Zahlen repräsentieren im Uhrzeigersinn laufende Winkel, während negative Zahlen gegen den Uhrzeigersinn laufende Winkel darstellen. Für statische Eigenschaften einer gegebenen Einheit kann jeder 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, 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 Gon. Ein voller Kreis entspricht 400grad. Beispiele: 0grad, 100grad, 38.8grad.

rad

Repräsentiert einen Winkel in Radiant. Ein voller Kreis entspricht 2π Radiant, was 6.2832rad annähernd entspricht. 1rad entspricht 180/π Grad. Beispiele: 0rad, 1.0708rad, 6.2832rad.

turn

Repräsentiert einen Winkel in Anzahl von Umdrehungen. Ein voller Kreis entspricht 1turn. Beispiele: 0turn, 0.25turn, 1.2turn.

Beispiele

Einstellung eines im Uhrzeigersinn verlaufenden rechten Winkels

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

Einstellung eines flachen Winkels

Ein Diagramm, das eine im Uhrzeigersinn verlaufende 180-Grad-Drehung entlang eines Kreises zeigt, indem vom obersten Punkt zum untersten Punkt bewegt wird. 180deg = 200grad = 0.5turn ≈ 3.1416rad

Einstellung eines gegen den Uhrzeigersinn verlaufenden rechten Winkels

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

Einstellung eines null Winkels

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

Siehe auch