<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 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 dem Einheitensymbol 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 verlaufende Winkel, während negative Zahlen gegen den Uhrzeigersinn verlaufende Winkel darstellen. Für statische Eigenschaften einer gegebenen Einheit kann jeder Winkel durch verschiedene äquivalente Werte ausgedrückt werden. Zum Beispiel entspricht 90deg -270deg, und 1turn entspricht 4turn. Für dynamische Eigenschaften, wie bei der Anwendung einer animation oder transition, wird der Effekt jedoch unterschiedlich sein.

Einheiten

deg: Repräsentiert einen Winkel in Grad (degrees). Ein voller Kreis beträgt 360deg. Beispiele: 0deg, 90deg, 14.23deg.
grad: Repräsentiert einen Winkel in Gon (gradians). Ein voller Kreis beträgt 400grad. Beispiele: 0grad, 100grad, 38.8grad.
rad: Repräsentiert einen Winkel in Radianten. Ein voller Kreis ist 2π Radianten, das 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 beträgt 1turn. Beispiele: 0turn, 0.25turn, 1.2turn.