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 einzige 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 der Quadrate seiner drei Koordinaten nicht 1 ist), wird der Benutzeragent ihn intern normalisieren. Ein nicht normalisierbarer Vektor, wie z.B. der Nullvektor, [0, 0, 0], führt dazu, dass die Rotation ignoriert wird, ohne jedoch 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

Die durch rotate3d() erzeugte Rotationsmenge 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; ist er positiv, erfolgt die Bewegung im Uhrzeigersinn; ist er negativ, erfolgt sie gegen den Uhrzeigersinn.

css
rotate3d(x, y, z, a)

Werte

x

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

y

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

z

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

a

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

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}

Formale Syntax

<rotate3d()> = 
  rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )

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