Функция rotateX

La función rotateX define la rotación alrededor del eje X en el espacio tridimensional. Se utiliza en conjunto con la propiedad transform. El valor de la propiedad es un ángulo en cualquier unidad de ángulos. Un valor positivo gira el elemento hacia nosotros, un valor negativo - alejándose de nosotros. La rotación se realiza alrededor del punto definido por la propiedad transform-origin.

Sintaxis

selector {
	transform: rotateX(ángulo);
}

Ejemplo

En este ejemplo, el bloque al pasar el cursor girará 180 grados alrededor del eje X. Para una transición suave se ha añadido la propiedad transition:

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

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

Ejemplo

Cambiemos el eje de rotación usando la propiedad 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);
}

Ejemplo

Establezcamos un á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);
}

Véase también

la función rotate,
que define la rotación alrededor de los ejes X e Y
la función rotateY,
que define la rotación alrededor del eje Y
la función rotateZ,
que define la rotación alrededor del eje Z
la función rotate3d,
que define la rotación alrededor de los tres ejes