<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, Radianten oder Umdrehungen angegeben wird. Er wird beispielsweise 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 einer <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 sie durch ein einzelnes + oder - Vorzeichen eingeleitet werden. Positive Zahlen repräsentieren Winkel im Uhrzeigersinn, während negative Zahlen Winkel gegen den Uhrzeigersinn darstellen. Für statische Eigenschaften einer bestimmten Einheit kann jeder Winkel durch verschiedene gleichwertige Werte dargestellt werden. Zum Beispiel entspricht 90deg -270deg, und 1turn entspricht 4turn. Bei dynamischen Eigenschaften, wie bei der Anwendung einer animation oder transition, wird der Effekt dennoch unterschiedlich sein.

Einheiten

deg: Repräsentiert einen Winkel in Grad. Ein vollständiger Kreis sind 360deg. Beispiele: 0deg, 90deg, 14.23deg.
grad: Repräsentiert einen Winkel in Gon. Ein vollständiger Kreis sind 400grad. Beispiele: 0grad, 100grad, 38.8grad.
rad: Repräsentiert einen Winkel in Radianten. Ein vollständiger Kreis sind 2π Radianten, was zu ungefähr 6.2832rad führt. 1rad entspricht 180/π Grad. Beispiele: 0rad, 1.0708rad, 6.2832rad.
turn: Repräsentiert einen Winkel in Anzahl von Umdrehungen. Ein vollständiger Kreis entspricht 1turn. Beispiele: 0turn, 0.25turn, 1.2turn.