<angle>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 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 Abstand zwischen der Einheit und der Zahl. Die Winkeleinheit ist nach der Zahl 0 optional.

Optional kann ein einzelnes + oder - Zeichen vorangestellt werden. Positive Zahlen repräsentieren Uhrzeigersinn-Winkel, während negative Zahlen gegen den Uhrzeigersinn-Winkel darstellen. Für statische Eigenschaften einer bestimmten Einheit kann jeder Winkel durch verschiedene äquivalente Werte dargestellt werden. Zum Beispiel entspricht 90deg -270deg, und 1turn entspricht 4turn. Bei dynamischen Eigenschaften, wie bei der Anwendung von animation oder transition, wird der Effekt jedoch unterschiedlich sein.

Einheiten

deg: Repräsentiert einen Winkel in Grad. Ein voller Kreis hat 360deg. Beispiele: 0deg, 90deg, 14.23deg.
grad: Repräsentiert einen Winkel in Gon. Ein voller Kreis hat 400grad. Beispiele: 0grad, 100grad, 38.8grad.
rad: Repräsentiert einen Winkel in Radiant. Ein voller Kreis entspricht 2π Radiant, was etwa 6.2832rad ist. 1rad sind 180/π Grad. Beispiele: 0rad, 1.0708rad, 6.2832rad.
turn: Repräsentiert einen Winkel in einer Anzahl von Umdrehungen. Ein voller Kreis ist 1turn. Beispiele: 0turn, 0.25turn, 1.2turn.