rotateZ()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Die rotateZ() CSS Funktion definiert eine Transformation, die ein Element um die z-Achse dreht, ohne es zu verformen. Das Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

Die Rotationsachse verläuft durch einen Ursprung, der durch die CSS-Eigenschaft transform-origin definiert ist.

Hinweis: rotateZ(a) entspricht rotate(a) oder rotate3d(0, 0, 1, a).

Hinweis: Im Gegensatz zu Drehungen in der 2D-Ebene ist die Zusammensetzung von 3D-Drehungen normalerweise nicht kommutativ. Mit anderen Worten, die Reihenfolge, in der die Drehungen angewendet werden, beeinflusst das Ergebnis.

Syntax

Der Umfang der durch rotateZ() erzeugten Drehung wird durch einen <angle> angegeben. Ist der Wert positiv, erfolgt die Bewegung im Uhrzeigersinn; ist der Wert negativ, erfolgt sie gegen den Uhrzeigersinn.

css
rotateZ(a)

Werte

a

Ist ein <angle> der den Winkel der Rotation darstellt. Ein positiver Winkel steht für eine Drehung im Uhrzeigersinn, ein negativer für eine Drehung gegen den Uhrzeigersinn.

Kartesische Koordinaten auf ℝ^2 Homogene Koordinaten auf ℝℙ^2 Kartesische Koordinaten auf ℝ^3 Homogene Koordinaten auf ℝℙ^3
Diese Transformation gilt für den 3D-Raum und kann nicht auf der Ebene dargestellt werden.
( cos ( a ) - sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1 ) \left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)
( cos ( a ) - sin ( a ) 0 0 sin ( a ) cos ( a ) 0 0 0 0 1 0 0 0 0 1 ) \left( \begin{array}{cccc} \cos(a) & -\sin(a) & 0 & 0 \\ \sin(a) & \cos(a) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)

Beispiele

HTML

html
<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateZ(45deg);
  background-color: pink;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2
# funcdef-rotatez

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch