rotateY()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
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
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 Drehachse verläuft durch einen Ursprung, der durch die CSS-Eigenschaft transform-origin
definiert ist.
Hinweis:
rotateY(a)
ist äquivalent zu
rotate3d(0, 1, 0, a)
.
Hinweis: Im Gegensatz zu Drehungen in der 2D-Ebene ist die Zusammensetzung von 3D-Drehungen in der Regel nicht kommutativ. Mit anderen Worten: Die Reihenfolge, in der die Drehungen angewendet werden, beeinflusst das Ergebnis.
Syntax
rotateY(a)
Werte
a
-
Ist ein
<angle>
der den Winkel der Drehung darstellt. Ein positiver Winkel steht für eine Drehung im Uhrzeigersinn, ein negativer für 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. |
|
|
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
Specification |
---|
CSS Transforms Module Level 2> # funcdef-rotatey> |
Browser-Kompatibilität
Loading…
Siehe auch
transform
Eigenschaftrotate
Eigenschaft<transform-function>