rotateX()

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

Probieren Sie es aus

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

Hinweis: rotateX(a) ist äquivalent zu 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

Die durch rotateX() erzeugte Rotationsmenge wird durch ein <angle> angegeben. Ist der Winkel positiv, erfolgt die Bewegung im Uhrzeigersinn; bei negativem Winkel gegen den Uhrzeigersinn.

css
rotateX(a)

Werte

a

Ist ein <angle> und steht für den Rotationswinkel. Ein positiver Winkel steht für eine Rotation im Uhrzeigersinn, ein negativer Winkel für eine gegen den Uhrzeigersinn.

Kartesische Koordinaten auf ℝ^2 Homogene Koordinaten auf ℝℙ^2 Kartesische Koordinaten auf ℝ^3 Homogene Koordinaten auf ℝℙ^3
Diese Transformation gilt für den 3D-Raum und kann nicht auf der Ebene dargestellt werden.
( 1 0 0 0 cos ( a ) - sin ( a ) 0 sin ( a ) cos ( a ) ) \left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & \cos(a) & -\sin(a) \\ 0 & \sin(a) & \cos(a) \end{array} \right)
( 1 0 0 0 0 cos ( a ) - sin ( a ) 0 0 sin ( a ) cos ( a ) 0 0 0 0 1 ) \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)

Beispiele

HTML

html
<div>Normal</div>
<div class="rotated">Rotated</div>

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

BCD tables only load in the browser

Siehe auch