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. Ihr 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 wird.

Hinweis: rotateZ(a) ist gleichwertig zu rotate(a) oder rotate3d(0, 0, 1, a).

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

Syntax

Der durch rotateZ() erzeugte Rotationsgrad wird durch ein <angle> angegeben. Wenn er positiv ist, erfolgt die Bewegung im Uhrzeigersinn; wenn negativ, gegen den Uhrzeigersinn.

css

rotateZ(a)

Werte

a: Ist ein <angle> und stellt den Winkel der Rotation dar. Ein positiver Winkel bedeutet eine Rotation im Uhrzeigersinn, ein negativer gegen den Uhrzeigersinn.

Kartesische Koordinaten auf ℝ^2	Homogene Koordinaten auf ℝℙ^2	Kartesische Koordinaten auf ℝ^3	Homogene Koordinaten auf ℝℙ^3
Diese Transformation wird auf den 3D-Raum angewendet und kann nicht auf der Ebene dargestellt werden.		$\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\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)$

Formale Syntax

<rotateZ()> = 
  rotateZ( [ <angle> | <zero> ] )

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

transform Eigenschaft
rotate Eigenschaft
<transform-function>