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⁩.

DierotateY()CSS Funktion definiert eine Transformation, die ein Element um die y-Achse (vertikal) rotiert, 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>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

Die Rotationsachse läuft durch einen Ursprung, der durch die CSS-Eigenschafttransform-origin definiert wird.

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

css

rotateY(a)

Werte

a: Ist ein<angle> und repräsentiert den Winkel der Rotation. Ein positiver Winkel gibt eine Drehung im Uhrzeigersinn an, 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 im 3D-Raum angewendet und kann nicht in der Ebene dargestellt werden.		$(\begin{matrix} cos (a) & 0 & sin (a) \\ 0 & 1 & 0 \\ - sin (a) & 0 & cos (a) \end{matrix}) \left( \begin{array}{ccc} \cos(a) & 0 & \sin(a) \\ 0 & 1 & 0 \\ -\sin(a) & 0 & \cos(a) \end{array} \right)$	$(\begin{matrix} cos (a) & 0 & sin (a) & 0 \\ 0 & 1 & 0 & 0 \\ - sin (a) & 0 & cos (a) & 0 \\ 0 & 0 & 0 & 1 \end{matrix}) \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>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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換

rotateY()

Help improve MDN