Funktion rotateZ

Die Funktion rotateZ definiert eine Drehung um die Z-Achse im dreidimensionalen Raum. Wird zusammen mit der Eigenschaft transform verwendet. Als Wert der Eigenschaft dient ein Winkel in beliebigen Winkeleinheiten. Ein positiver Wert dreht im Uhrzeigersinn, ein negativer - gegen den Uhrzeigersinn. Die Drehung erfolgt um den Punkt, der durch die Eigenschaft transform-origin festgelegt wird.

Syntax

Selektor {
	transform: rotateZ(Winkel);
}

Beispiel

In diesem Beispiel dreht sich der Block bei Hover um 180 Grad um die Z-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: rotateZ(180deg);
}

Beispiel

Ändern wir die 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: center bottom;
}
#elem:hover {
	transform: rotateZ(180deg);
}

Siehe auch

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