Función rotate

La función rotate() establece la rotación de un elemento en un ángulo determinado. Se utiliza junto con la propiedad transform. El valor de la propiedad es un ángulo en cualquier unidad de ángulos. Un valor positivo gira en el sentido de las agujas del reloj, uno negativo - en sentido contrario. La rotación se realiza alrededor del punto definido por la propiedad transform-origin.

Sintaxis

selector {
	transform: rotate(ángulo);
}

Ejemplo

En este ejemplo, el bloque está girado 30 grados en el sentido de las agujas del reloj:

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

#elem {
	transform: rotate(30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Ejemplo

En este ejemplo, el bloque está girado 30 grados en sentido contrario a las agujas del reloj:

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

#elem {
	transform: rotate(-30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Ejemplo

En este ejemplo, el bloque al pasar el cursor girará 1 vuelta, ya que el valor de rotación se establece en 1turn (se puede lograr el mismo efecto si se establece el ángulo de rotación en 360deg). Para una rotación suave, se añade 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: rotate(1turn);
}

Véase también

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