rotate3d()

Baseline Widely available

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

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

transform: rotate3d(0, 0, 0, 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 einzelne Drehachse beschreiben. Die Drehachse wird durch einen [x, y, z] Vektor definiert und verläuft durch den Ursprung (wie durch die transform-origin Eigenschaft definiert). Falls der angegebene Vektor nicht normalisiert ist (d.h. wenn die Summe der Quadrate seiner drei Koordinaten nicht 1 ist), 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, jedoch ohne die gesamte CSS-Eigenschaft ungültig zu machen.

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

css
rotate3d(x, y, z, a)

Werte

x

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

y

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

z

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

a

Ist ein <angle>, der den Drehwinkel darstellt. Ein positiver Winkel steht für eine Drehung im Uhrzeigersinn, ein negativer Winkel für 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

Siehe auch