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. Das Ergebnis ist ein <transform-function>-Datentyp.

Probieren Sie es aus

transform: rotate3d(0);

transform: rotate3d(1, 1, 1, 45deg);

transform: rotate3d(2, -1, -1, -0.2turn);

transform: rotate3d(0, 1, 0.5, 3.142rad);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Im 3D-Raum haben Drehungen 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 ergibt), wird der User-Agent ihn intern normalisieren. Ein nicht normalisierbarer Vektor, wie der Nullvektor [0, 0, 0], führt dazu, dass die Drehung ignoriert wird, ohne jedoch die gesamte CSS-Eigenschaft ungültig zu machen.

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

Syntax

Der Umfang der durch rotate3d() erzeugten Drehung 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 Drehwinkel; ist er positiv, erfolgt die Bewegung im Uhrzeigersinn; ist er negativ, gegen den Uhrzeigersinn.

css
rotate3d(x, y, z, a)

Werte

x

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

y

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

z

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

a

Ist ein <angle>, der den Winkel der Drehung darstellt. Ein positiver Winkel bedeutet eine Drehung im Uhrzeigersinn, ein negativer Winkel eine Drehung gegen den Uhrzeigersinn.

Kartesische Koordinaten auf ℝ^2 Diese Transformation gilt für den 3D-Raum und kann nicht in 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

Drehen auf der 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

Drehen 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