rotateX()

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 rotateX() CSS Funktion definiert eine Transformation, die ein Element um die x-Achse (horizontal) dreht, ohne es zu verformen. Das Ergebnis ist ein Datentyp.

Probieren Sie es aus

transform: rotateX(0);

transform: rotateX(45deg);

transform: rotateX(-0.2turn);

transform: rotateX(3.142rad);

Die Rotationsachse verläuft durch einen Ursprung, der durch die transform-origin CSS-Eigenschaft definiert wird.

Hinweis: rotateX(a) ist gleichbedeutend mit rotate3d(1, 0, 0, a).

Hinweis: Im Gegensatz zu Rotationen in der 2D-Ebene ist die Zusammensetzung von 3D-Rotationen in der Regel nicht kommutativ. Das heißt, die Reihenfolge, in der die Rotationen angewendet werden, beeinflusst das Ergebnis.

Syntax

Der durch rotateX() erzeugte Rotationsgrad wird durch ein angegeben. Wenn positiv, erfolgt die Bewegung im Uhrzeigersinn; wenn negativ, gegen den Uhrzeigersinn.

css
rotateX(a)

Werte

a

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

Kartesische Koordinaten auf ℝ^2 Homogene Koordinaten auf ℝℙ^2 Kartesische Koordinaten auf ℝ^3 Homogene Koordinaten auf ℝℙ^3
Diese Transformation wird auf den 3D-Raum angewendet und kann nicht auf der Ebene dargestellt werden.
(1000cos(a)-sin(a)0sin(a)cos(a))\left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & \cos(a) & -\sin(a) \\ 0 & \sin(a) & \cos(a) \end{array} \right)
(10000cos(a)-sin(a)00sin(a)cos(a)00001)\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & \cos(a) & -\sin(a) & 0 \\ 0 & \sin(a) & \cos(a) & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)

Formale Syntax

 = 
  rotateX( [  |  ] )

Beispiele

HTML

html
Normal


Rotated

CSS

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

.rotated {
  transform: rotateX(45deg);
  background-color: pink;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2
# funcdef-rotatex

Browser-Kompatibilität

Siehe auch