rotate

Die rotate Eigenschaft in CSS dreht ein Element um eine oder mehrere Achsen. Stellen Sie es sich so vor, als würden Sie einen oder mehrere Stifte in ein Element stecken und das Element um diese Punkte drehen, im Uhrzeigersinn und gegen den Uhrzeigersinn, gemessen in Grad-, Gon-, Radiant- und Drehungswerten.

.element {
  rotate: 45deg;
}

Während CSS bereits eine andere Möglichkeit hat, Elemente mithilfe der rotate() Funktion in der transform Eigenschaft zu drehen, so:

.element {
  transform: rotate(45deg);
}

…macht die CSS rotate Eigenschaft dies unabhängig von der transform Eigenschaft, plus den zusätzlichen Vorteil, entlang der Z-Achse drehen zu können, was mit transform: rotate() derzeit nicht möglich ist.

Syntax

rotate: none | <angle> | [ x | y | z | <number>{3} ] && <angle>;

Die Winkelwerte werden in Grad, Gon, Radiant oder Drehungen ausgedrückt.

/* Keyword values */
rotate: none;

/* Angle values */
rotate: 45deg;
rotate: 0.35turn;
rotate: 1.27rad;
rotate: -50grad;

/* x, y, or z-axis name plus angle */
rotate: x 45deg;
rotate: y 0.35turn;
rotate: z 1.27rad;

/* Vector plus angle values */
rotate: 1 0.5 1 45deg;

/* Global values */
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: unset;

• Initialwert: none
• Gilt für: transformierbare Elemente
• Vererbt: nein
• Prozente: n/a
• Berechneter Wert: wie angegeben
• Animationstyp: eine Transformation
• Erzeugt Stapelkontext: ja

Werte

• none: Standardwert. Keine Drehung wird auf das Element angewendet.
• <angle>: Ein <angle> Wert wird verwendet, um einen numerischen Wert (ausgedrückt mit deg, grad, rad oder turn Einheiten) für die Drehung des Elements um die Z-Achse anzugeben. Dieser Wert funktioniert genau wie die rotate() Funktion, die wir mit der transform Eigenschaft verwenden.
• Achsenname mit <angle> Wert: Dies identifiziert, um welche Achse (X, Y oder Z) gedreht werden soll, zusammen mit einem numerischen Wert, wie stark das Element um diese Achse gedreht werden soll.
• Vektor plus Winkelwert: Die drei Zahlen stellen einen ursprungszentrierten Vektor dar, der eine Linie definiert, um die Sie das Element drehen möchten, plus einen <angle> Wert, der den Winkel angibt, durch den das Element gedreht werden soll. Entspricht einer rotate3d() (3D-Drehung) Funktion.

Einheiten

Meistens werden Sie wahrscheinlich eine Grad-Einheit (z. B. 45deg) als Wert für die rotate Eigenschaft verwenden. Aber wie wir gesehen haben, gibt es insgesamt vier Arten von Einheiten, die die Eigenschaft akzeptiert. Sie sind seltener als, sagen wir, Pixel, ems, rems und Prozente. Lassen Sie uns sie aufschlüsseln, um zu verstehen, was sie sind und wie sie funktionieren.

• deg: Ein Grad ist 1/360 eines vollen Kreises.
• grad: Ein Gon ist 1/400 eines vollen Kreises.
• rad: Ein Radiant ist die Länge des Durchmessers eines Kreises entlang des Bogens der Form. Ein Radiant entspricht 180deg oder 1/2 eines vollen Kreises. Ein voller Kreis sind 2π Radiant, was 6.2832rad oder 360deg entspricht.
• turn: Eine Drehung ist ein voller Kreis. Ein halber Kreis entspricht also .5turn oder 180deg.

Die rotate Eigenschaft akzeptiert jede dieser Einheiten, da sie unterschiedliche Möglichkeiten sind, dieselbe Idee auszudrücken: einen Winkel um einen Kreis. Und sie werden von allen wichtigen Browsern gleichermaßen unterstützt.

Übergänge und Animationen

Die rotate Eigenschaft unterstützt CSS-Übergänge und Animationen. Das bedeutet, wir können von einem Winkel zum anderen übergehen, z. B. beim Überfahren mit der Maus.

.element {
  rotate: 5deg;
}

.element:hover {
  rotate: 45deg;
  transition: rotate 1s;
}

Dasselbe gilt für CSS-Animationen bei der Arbeit mit @keyframes. Wir können rotate verwenden, wenn wir eine Animation definieren, genau wie wir es bei anderen Eigenschaften tun können.

Wir können interessantere und komplexere Übergänge und Animationen implementieren, wenn wir rotate mit den transform Funktionen kombinieren und ein Element unabhängig von den Transformationen drehen.

Wenn Sie sich die Browserunterstützung genau ansehen, sollten Sie vielleicht eine Fallback-Lösung in Betracht ziehen, die mit anderen Browsern funktioniert, bis die rotate Eigenschaft volle Browserunterstützung erhält. Die transform Eigenschaft ist eine brauchbare Fallback-Alternative für eine unabhängige Transformationseigenschaft wie rotate.

Zum Beispiel könnten wir die rotate Animation in einen @supports Block einfügen. Auf diese Weise wird die Animation nur ausgeführt, wenn der Browser die rotate Eigenschaft unterstützt.

/* Using transform by default */
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

/* Use rotate instead, but only if it is supported */
@supports (rotate: 0deg) {
  @keyframes loader {
    0% {
      rotate: 0deg;
    }
    100% {
      rotate: 180deg;
    }
  }
}

Wo wir gerade dabei sind…

Browser-Unterstützung

Demo

Weitere Informationen

• CSS Transforms Module Level 2 specification (Editor's draft)
• MDN Web Docs
• Caniuse

Weitere Lektüre

Verwandt