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. Das Ergebnis ist ein 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);


  

    
1

    
2

    
3

    
4

    
5

    
6

  




#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). Wenn 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], wird dazu führen, 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 Komposition von 3D-Drehungen in der Regel nicht kommutativ. Mit anderen Worten, die Reihenfolge, in der die Drehungen angewendet werden, beeinflusst das Ergebnis.

Syntax

Die durch rotate3d() erzeugte Drehung wird durch drei s und einen angegeben. Die s repräsentieren die x-, y- und z-Koordinaten des Vektors, der die Drehachse angibt. Der repräsentiert den Drehwinkel; wenn positiv, erfolgt die Bewegung im Uhrzeigersinn; wenn negativ, erfolgt sie gegen den Uhrzeigersinn.

css
rotate3d(x, y, z, a)

Werte

x

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

y

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

z

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

a

Ist ein -Wert, der den Drehwinkel darstellt. Ein positiver Winkel deutet auf eine Drehung im Uhrzeigersinn hin, ein negativer Winkel auf eine gegen den Uhrzeigersinn.

Kartesische Koordinaten in ℝ^2 Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.
Homogene Koordinaten in ℝℙ^2
Kartesische Koordinaten in ℝ^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 in ℝℙ^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(  ,  ,  , [  |  ] )

Beispiele

Drehung um die y-Achse

HTML

html
Normal


Rotated

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
Normal


Rotated

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