En esta entrada veremos como realizar rotaciones sobre cualquier elementos HTML empleando la propiedad transform de CSS3.

En esta entrada veremos como realizar rotaciones sobre cualquier elementos HTML empleando la propiedad transform de CSS3.

La propiedad transform en CSS3 permite aplicar transformaciones 2D y 3D a los elementos HTML en una página web; en esta entrada nos interesa aprender a realizar una de estas transformaciones, que son las rotaciones; las propiedades posibles a emplear son las siguientes:

• rotate(ángulo): Define una rotación en su espacio 2D.
• rotate3d(x,y,z,ángulo): Define una rotación 3D en todos los ejes.
• rotateX(ángulo): Define una rotación 3D alrededor del eje de las X.
• rotateY(ángulo): Define una rotación 3D alrededor del eje de las Y.
• rotateZ(ángulo): Define una rotación 3D alrededor del eje de las Z.

Consideraciones

• El ángulo debe de ser definido en grados (deg por sus siglas en inglés).
• Es recomendable utilizar los prefijos de los navegadores web para garantizar su compatibilidad.
• Con todas las propiedades vistas anteriormente es posible definir las rotaciones en un espacio 2D y 3D según un punto de origen definido por la propiedad transform-origin.

Definiendo una regla en CSS para las transformaciones

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 en adelante*/
-webkit-transform:rotate(7deg); /* Opera, Chrome, y Safari */
}

Ejemplos de rotaciones sobre elementos

En todos los ejemplos se aplicarán rotaciones a los div contenedores de las imágenes desde los 0 grados a los 360 grados en un ciclo infinito con ayuda de un poco de JavaScript.

rotate(angulo):

Con la propiedad rotate es posible definir las rotaciones en un espacio 2D; según el signo (positivo o negativo) del ángulo especificado puede ocurrir una de las siguientes condiciones:

• Sentido Horario o hacia la derecha si el ángulo es positivo.
• Sentido Antihorario o hacia la izquierda si el ángulo es negativo.

Primero veremos un ejemplo de lo anterior; básicamente consiste en aplicar las rotaciones de un par de imágenes en sentido horario cuando el grado es positivo y en sentido antihorario en caso contrarío:

• Rotaciones horarias con un grado positivo:

  Rotaciones Horarias

  
  rotate()
• Rotaciones antihorarias con un grado negativo:

  Rotaciones Antihorarias

  
  rotate()

rotateX(ángulo), rotateY(ángulo) y rotateZ(ángulo):

Cómo pudieron haberse dado cuenta, el nombre de la propiedad indica el eje afectado por la rotaciones:

• Rotación en el eje X

  Rotación en el eje X

  
  rotateX()
• Rotación en el eje Y

  Rotación en el eje Y

  
  rotateY()
• Rotación en el eje Z
  
  

  Rotación en el eje Z

  
  
  
  
  rotateZ()

rotate3d(ángulo)

Ahora aplicaremos la rotación en los tres ejes con una sola propiedad:

Rotación en los ejes X, Y y Z



Rotación en los ejes X, Y y Z





rotate3d()

Si quisiéramos que el elemento sólo rotará en el eje de las X con la propiedad rotate3d() podríamos hacer lo siguiente:

rotateX(angulo) es equivalente a rotate3d(1, 0, 0, ángulo).

Puedes leer más sobre esta propiedad en el sitio de Desarrolladores de Mozilla.