Função rotateX

A função rotateX define uma rotação em relação ao eixo X 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 o elemento em nossa direção, um valor negativo gira para longe de nós. A rotação é realizada ao redor do ponto definido pela propriedade transform-origin.

Sintaxe

seletor {
	transform: rotateX(ângulo);
}

Exemplo

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

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

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	transition: transform 3s linear;
}
#elem:hover {
	transform: rotateX(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: rotateX(180deg);
}

Exemplo

Vamos definir um ângulo negativo:

<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: rotateX(-180deg);
}

Veja também

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