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

Optionen bestehen darin, das Zeichen mit einem einzelnen + oder - voranzustellen. Positive Zahlen repräsentieren Uhrzeigersinnwinkel, während negative Zahlen Gegenuhrzeigersinnwinkel darstellen. Bei statischen Eigenschaften einer gegebenen Einheit kann jeder Winkel durch verschiedene gleichwertige Werte dargestellt werden. Beispielsweise entspricht 90deg -270deg, und 1turn entspricht 4turn. Bei dynamischen Eigenschaften, wie bei der Anwendung einer animation oder transition, wird der Effekt jedoch unterschiedlich sein.

Einheiten

deg: Repräsentiert einen Winkel in Grad. Ein vollständiger Kreis entspricht 360deg. Beispiele: 0deg, 90deg, 14.23deg.
grad: Repräsentiert einen Winkel in Gon. Ein vollständiger Kreis entspricht 400grad. Beispiele: 0grad, 100grad, 38.8grad.
rad: Repräsentiert einen Winkel in Radianten. Ein vollständiger Kreis entspricht 2π Radianten, was etwa 6.2832rad entspricht. 1rad ist 180/π Grad. Beispiele: 0rad, 1.0708rad, 6.2832rad.
turn: Repräsentiert einen Winkel in Umdrehungen. Ein vollständiger Kreis entspricht 1turn. Beispiele: 0turn, 0.25turn, 1.2turn.