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 Achse der Rotation verläuft durch einen Ursprung, der durch die CSS-Eigenschaft transform-origin
definiert wird.
Hinweis: rotateY(a)
ist äquivalent zu
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. Mit anderen Worten, die Reihenfolge, in der die Rotationen angewendet werden, beeinflusst das Ergebnis.
Syntax
Das Ausmaß der Rotation, die durch rotateY()
erzeugt wird, wird durch einen <angle>
angegeben. Ist der Wert positiv, erfolgt die Bewegung im Uhrzeigersinn; ist er negativ, gegen den Uhrzeigersinn.
rotateY(a)
Werte
a
-
Ist ein
<angle>
der den Winkel der Rotation repräsentiert. Ein positiver Winkel bedeutet eine Drehung im Uhrzeigersinn, ein negativer 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. |
Formaler Syntax
Beispiele
HTML
<div>Normal</div>
<div class="rotated">Rotated</div>
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
BCD tables only load in the browser
Siehe auch
transform
Eigenschaftrotate
Eigenschaft<transform-function>