rotate3d()

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 rotate3d() CSS Funktion definiert eine Transformation, die ein Element um eine feste Achse im 3D-Raum dreht, ohne es zu verformen. Ihr Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

Im 3D-Raum haben Rotationen drei Freiheitsgrade, die zusammen eine einzelne Rotationsachse beschreiben. Die Rotationsachse wird durch einen [x, y, z] Vektor definiert und verläuft durch den Ursprung (wie durch die transform-origin Eigenschaft definiert). Wenn der Vektor, wie angegeben, nicht normalisiert ist (d.h., wenn die Summe des Quadrats seiner drei Koordinaten nicht 1 ist), wird der User-Agent ihn intern normalisieren. Ein nicht normalisierbarer Vektor, wie der Nullvektor [0, 0, 0], wird dazu führen, dass die Rotation ignoriert wird, aber ohne die gesamte CSS-Eigenschaft ungültig zu machen.

Hinweis: Anders als 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

Das Ausmaß der von rotate3d() erzeugten Rotation wird durch drei <number>s und einen <angle> angegeben. Die <number>s repräsentieren die x-, y- und z-Koordinaten des Vektors, der die Rotationsachse bezeichnet. Der <angle> repräsentiert den Rotationswinkel; bei positivem Wert erfolgt die Bewegung im Uhrzeigersinn, bei negativem entgegen dem Uhrzeigersinn.

css
rotate3d(x, y, z, a)

Werte

x

Ist ein <number>, der die x-Koordinate des Vektors beschreibt, der die Rotationsachse bezeichnet. Es kann eine positive oder negative Zahl sein.

y

Ist ein <number>, der die y-Koordinate des Vektors beschreibt, der die Rotationsachse bezeichnet. Es kann eine positive oder negative Zahl sein.

z

Ist ein <number>, der die z-Koordinate des Vektors beschreibt, der die Rotationsachse bezeichnet. Es kann eine positive oder negative Zahl sein.

a

Ist ein <angle> und repräsentiert den Winkel der Rotation. Ein positiver Winkel bedeutet eine Drehung im Uhrzeigersinn, ein negativer Winkel eine entgegengesetzte.

Kartesische Koordinaten auf ℝ^2 Diese Transformation gilt für den 3D-Raum und kann nicht auf der Ebene dargestellt werden.
Homogene Koordinaten auf ℝℙ^2
Kartesische Koordinaten auf ℝ^3
(1+(1−cos(a))(x2−1)z⋅sin(a)+xy(1−cos(a))−y⋅sin(a)+xz(1−cos(a))−z⋅sin(a)+xy(1−cos(a))1+(1−cos(a))(y2−1)x⋅sin(a)+yz(1−cos(a))y⋅sin(a)+xz(1−cos(a))−x⋅sin(a)+yz(1−cos(a))1+(1−cos(a))(z2−1))\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a))\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a))\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1)\end{pmatrix}
Homogene Koordinaten auf ℝℙ^3
(1+(1−cos(a))(x2−1)z⋅sin(a)+xy(1−cos(a))−y⋅sin(a)+xz(1−cos(a))0−z⋅sin(a)+xy(1−cos(a))1+(1−cos(a))(y2−1)x⋅sin(a)+yz(1−cos(a))0y⋅sin(a)+xz(1−cos(a))−x⋅sin(a)+yz(1−cos(a))1+(1−cos(a))(z2−1)00001)\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a)) & 0\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a)) & 0\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1) & 0\\0 & 0 & 0 & 1\end{pmatrix}

Beispiele

Drehung um die y-Achse

HTML

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

CSS

css
body {
  perspective: 800px;
}

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

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}

Ergebnis

Drehung um eine benutzerdefinierte Achse

HTML

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

CSS

css
body {
  perspective: 800px;
}

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

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2
# funcdef-rotate3d

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch