Função rotateZ

A função rotateZ define uma rotação em relação ao eixo Z no espaço tridimensional. É usada em conjunto com a propriedade transform. O valor da propriedade é um ângulo em qualquer unidade de ângulo. Um valor positivo gira no sentido horário, um negativo - no sentido anti-horário. A rotação é realizada em torno do ponto definido pela propriedade transform-origin.

Sintaxe

seletor {
	transform: rotateZ(ângulo);
}

Exemplo

Neste exemplo, o bloco girará 180 graus em torno do eixo Z ao passar o mouse. Para uma suavidade na rotação, foi adicionada a propriedade transition:

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

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

Exemplo

Vamos mudar o eixo de rotação usando a propriedade 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);
}

Veja também

a função rotate,
que define uma rotação nos eixos X e Y
a função rotateX,
que define uma rotação no eixo X
a função rotateY,
que define uma rotação no eixo Y
a função rotate3d,
que define uma rotação nos três eixos