Funktion rotateY

Die Funktion rotateY definiert eine Drehung um die Y-Achse im dreidimensionalen Raum. Sie wird zusammen mit der Eigenschaft transform verwendet. Als Wert der Eigenschaft dient ein Winkel in beliebigen Winkeleinheiten. Ein positiver Wert dreht das Element zu uns, ein negativer - von uns weg. Die Drehung erfolgt um den Punkt, der durch die Eigenschaft transform-origin definiert wird.

Syntax

Selektor {
	transform: rotateY(Winkel);
}

Beispiel

In diesem Beispiel dreht sich der Block bei Mouseover um 180 Grad um die Y-Achse. Für eine flüssige Drehung wurde die Eigenschaft transition hinzugefügt:

<div id="elem">lorem ipsum</div>

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	transition: transform 3s linear;
}
#elem:hover {
	transform: rotateY(180deg);
}

Beispiel

Ändern der Drehachse mit der Eigenschaft transform-origin:

<div id="elem">lorem ipsum</div>

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	transition: transform 3s linear;
	transform-origin: right center;
}
#elem:hover {
	transform: rotateY(180deg);
}

Siehe auch

die Funktion rotate,
die eine Drehung um die X- und Y-Achse definiert
die Funktion rotateX,
die eine Drehung um die X-Achse definiert
die Funktion rotateZ,
die eine Drehung um die Z-Achse definiert
die Funktion rotate3d,
die eine Drehung um drei Achsen definiert