Rotaciones 2D

Rotaciones: La función CSS rotate()

css ᐳ Translaciones 2D ᐳ Rotaciones 2D ᐳ Escalado 2D

Las funciones de rotación son aquellas que realizan una transformación en la que giran un elemento respecto a un eje específico. Para ello, las utilizaremos en el interior de la propiedad CSS transform y elegiremos una de las siguientes funciones de rotación.

Funciones de rotación

Las funciones de rotación simplemente giran el elemento una cierta cantidad respecto al eje involucrado. Disponemos de las siguientes funciones de rotación:

Funciones	Significado
`rotateX(x)`	Establece una rotación 2D en x sólo para el eje horizontal X.
`rotateY(y)`	Establece una rotación 2D en y sólo para el eje vertical Y.
`rotateZ(z)`	Establece una rotación 2D en z sobre si mismo.
`rotate(z)`	Alias a la anterior.
`rotate3d(x, y, z, a)`	Ver en Transformaciones 3D

Por ejemplo, con transform: rotate(5deg) realizamos una rotación de 5 grados del elemento sobre si mismo. Utilizando rotateX() y rotateY() podemos hacer lo mismo respecto al eje X o el eje Y respectivamente.

.element {
  transform: rotateX(30deg) rotateY(20deg);
}

.element {
  transform: rotateZ(5deg);
}

Es posible que las rotaciones en X e Y no queden exactamente como buscas y parezcan simplemente más pequeñas o grandes (estiradas), ya que estamos haciendo una rotación 2D. En el apartado de perspectivas hablaremos más más sobre esto.

La propiedad rotate

En nuevas versiones de los navegadores, ya se soporta la propiedad individual rotate, y no hace falta utilizarla dentro de la propiedad transform.

Propiedad	Valor	Significado
`rotate`	none	No aplica rotación. Valor por defecto.
`rotate`		Rota el elemento sobre si mismo. Equivalente a `rotateZ()`.
`rotate`		Rota el elemento sobre el eje (`x`, `y` o `z`) indicado.
`rotate`		Indica un vector de rotaciones con el ángulo indicado.

Como se puede ver, se puede indicar 1 parámetro, 2 parámetros o 4 parámetros, dependiendo de la modalidad a utilizar. Veamos algunos ejemplos:

.element {
  rotate: 45deg;        /* Equivale a transform: rotateZ(45deg);  */

  rotate: x 45deg;      /* Equivale a transform: rotateX(45deg);  */
  rotate: y 120deg;     /* Equivale a transform: rotateY(120deg); */

  rotate: 0 0 1 45deg;  /* Equivale a transform: rotateZ(45deg);  */
  rotate: 1 0 0 15deg;  /* Equivale a transform: rotateX(15deg);  */
  rotate: 0 1 1 5deg;   /* Equivale a transform: rotateY(5deg) rotateZ(5deg);  */
}

Tabla de contenidos