rotateY()

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

Probieren Sie es aus

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

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

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

Syntax

Die Drehung, die durch rotateY() erzeugt wird, wird durch ein <angle> angegeben. Bei einem positiven Wert erfolgt die Drehung im Uhrzeigersinn; bei einem negativen Wert gegen den Uhrzeigersinn.

css
rotateY(a)

Werte

a

Ist ein <angle> und stellt den Winkel der Drehung dar. Ein positiver Winkel bedeutet eine Drehung im Uhrzeigersinn, ein negativer Winkel eine 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 die Ebene projiziert werden.
(cos(a)0sin(a)010-sin(a)0cos(a))\left( \begin{array}{ccc} \cos(a) & 0 & \sin(a) \\ 0 & 1 & 0 \\ -\sin(a) & 0 & \cos(a) \end{array} \right)
(cos(a)0sin(a)00100-sin(a)0cos(a)00001)\left( \begin{array}{cccc} \cos(a) & 0 & \sin(a) & 0 \\ 0 & 1 & 0 & 0 \\ -\sin(a) & 0 & \cos(a) & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)

Formale Syntax

<rotateY()> = 
rotateY( [ <angle> | <zero> ] )

Beispiele

HTML

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

CSS

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

.rotated {
  transform: rotateY(60deg);
  background-color: pink;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2
# funcdef-rotatey

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rotateY()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch