`<angle>` CSS-Typ

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Der <angle> CSS Datentyp repräsentiert einen Winkelwert, der in Grad, Gon, Radianten oder Umdrehungen ausgedrückt 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. Während einige ältere Anwendungen eine einheitenlose 0 akzeptieren, sollten Sie immer eine Einheit für Nullwerte angeben, wie z. B.: 0deg, 0grad, 0rad oder 0turn.

Optional kann einem Wert ein einfaches + oder - Zeichen vorangestellt werden. Positive Zahlen repräsentieren Winkel im Uhrzeigersinn, während negative Zahlen Winkel gegen den Uhrzeigersinn repräsentieren. Für statische Eigenschaften einer bestimmten Einheit kann jeder Winkel durch verschiedene äquivalente Werte dargestellt werden. Beispielsweise entspricht 90deg -270deg, und 1turn entspricht 4turn. Bei dynamischen Eigenschaften, wie dem Anwenden einer animation oder transition, wird die Wirkung dennoch anders 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 Radianten. Ein voller Kreis sind 2π Radianten, was ungefähr 6.2832rad entspricht. 1rad sind 180/π Grad. Beispiele: 0rad, 1.0708rad, 6.2832rad.
turn: Repräsentiert einen Winkel in einer Anzahl von Umdrehungen. Ein voller Kreis entspricht 1turn. Beispiele: 0turn, 0.25turn, 1.2turn.