rotateY() CSS-Funktion
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die rotateY() CSS Funktion definiert eine Transformation, die ein Element um die y-Achse (vertikal) dreht, ohne es zu verzerren. Das Ergebnis ist ein <transform-function> Datentyp.
Probieren Sie es aus
transform: rotateY(0);
transform: rotateY(45deg);
transform: rotateY(-0.2turn);
transform: rotateY(3.142rad);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Die Rotationsachse 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 üblicherweise nicht kommutativ. Mit anderen Worten, die Reihenfolge, in der die Rotationen angewendet werden, beeinflusst das Ergebnis.
Syntax
rotateY(a)
Werte
a-
Ist ein
<angle>und repräsentiert den Winkel der Rotation. Ein positiver Winkel bezeichnet 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 gilt für den 3D-Raum und kann nicht auf der Ebene dargestellt werden. |
|
|
|
Formale Syntax
<rotateY()> =
rotateY( [ <angle> | <zero> ] )
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
| Spezifikation |
|---|
| CSS Transforms Module Level 2 # funcdef-rotatey |
Browser-Kompatibilität
Siehe auch
transformEigenschaftrotateEigenschaft<transform-function>