Podemos utilizar la función rotate() para rotar elementos. Los valores positivos rotan el elemento en sentido horario, mientras que los valores negativos lo hacen en sentido antihorario. El ángulo de rotación se especifica normalmente en grados (deg), siendo el valor predeterminado 0deg, lo que indica que no hay rotación. Otras unidades aceptables para los ángulos de rotación son vueltas (turn) y radianes (rad).

Ejes del elemento

Para comprender cómo funciona la rotación, es necesario entender el concepto de ejes del elemento. Existen tres ejes:

• El eje x es horizontal, va de izquierda a derecha;
• El eje y es vertical, va de arriba hacia abajo;
• El eje z es perpendicular a la pantalla, apuntando hacia el espectador.

Dirección de rotación

Por defecto, la propiedad rotate() rota el elemento alrededor del eje z. Sin embargo, también podemos aplicar rotación alrededor del eje x y del eje y utilizando los siguientes valores:

transform: rotateX(angle);
transform: rotateY(angle);

Ejemplo 1

Considere el siguiente código de ejemplo, donde aplicamos diferentes ángulos de rotación para demostrar la rotación alrededor del eje z:

Ejemplo 2

En este ejemplo, se explora la rotación alrededor de los ejes z, x y y: