CSS: Rotación

La rotación consiste en modificar la orientación de un objeto alrededor de un centro de rotación específico, sin que eso conlleve una alteración de su posición ni de su tamaño. Esto implica girar el objeto alrededor de un eje, un ángulo determinado, que puede ser en cualquiera de las siguientes unidades: grados (deg), grados centesimales (grad), radianes (rad) o vueltas (turn).

En CSS, puede rotarse elementos a partir de una serie de funciones que se usan como valor de la propiedad de transformación transform. Las rotaciones pueden realizarse en cualquiera de los tres ejes de un espacio de tres dimensiones. También existe una propiedad CSS específica: rotate.

Algunas funciones permiten rotar elementos en los dos ejes de un plano en 2D y otras permiten rotar elementos en un espacio 3D. La tabla siguiente contiene una lista completa de las funciones relativas a la rotación:

Por defecto, el centro de rotación es el centro geométrico de los elementos, pero se puede modificar con la propiedad CSS transform-origin.

La función ‘rotateX()’

La función rotateX() es utilizada como valor de la propiedad CSS transform y permite rotar un elemento a través del eje horizontal. Como consecuencia de la rotación, se verá un poco achatado verticalmente. Con una rotación de 180 grados, el elemento quedaría invertido en vertical, de cara abajo.

El parámetro de rotateX() será un valor en unidades de ángulo. El elemento rotará siempre de arriba a abajo. El punto de rotación está en el eje horizontal (X), que por defecto se encuentra centrado al elemento en cuestión.

Para visualizar un ejemplo, creamos un contenedor cuadrado de color naranja, y en su interior colocaremos otro elemento, del mismo tamaño, de color turquesa, que rotaremos 60 grados.

Código CSS:

.contenedor {
  background: #ff7f2aaa;
  border: 1px solid #ff7f2a;
  display: inline-block;
  height: 40px;
  width: 40px;
}

.contenido {
  background: teal;
  height: 40px;
  width: 40px;
}

.rotarX {
  transform: rotateX(60deg);
}

Resultado:

A

R

En el caso origen (izquierda), el objeto turquesa está sin rotar, mientras que en el segundo caso, este objeto ha rotado 60 grados, por eso se ve más chato. Si lo rotáramos 90 grados, quedaría de perfil y no se vería, pues no tiene espesor. Girándolo 180 grados quedaría invertido verticalmente.

La función ‘rotateY()’

La función rotateY() se utiliza como valor de la propiedad CSS transform. Con esta propiedad es posible rotar un elemento a través del eje vertical, como si se tratara de una puerta giratoria. Con una rotación de 180 grados se vería invertido horizontalmente, como si se tratara de un espejo.

El parámetro de rotateY() será un valor en unidades de ángulo. El elemento rotará siempre de derecha a izquierda. Por defecto, el punto de rotación está en el eje vertical (Y), que se encuentra centrado al elemento.

En el siguiente ejemplo haremos lo mismo que en el ejemplo anterior, pero esta vez la rotación se realizará a través de un eje vertical.

Código CSS:

.rotarY {
  transform: rotateY(60deg);
}

Resultado:

A

R

En el caso de la izquierda, el objeto turquesa carece de rotación. En el de la derecha, el objeto está rotado verticalmente 60 grados y se ve más estrecho. A los 90 grados estaría de perfil y sería invisible porque no tiene espesor. A los 180 grados estaría invertido horizontalmente.

La función ‘rotateZ()’

La función rotateZ() se utiliza como valor de la propiedad CSS transform, y está diseñada para rotar específicamente un elemento a través del plano Z de un espacio 3D. En cambio, si se trabaja en un plano 2D, esta función rotará el elemento sobre sí mismo, de la misma forma que la función rotate().

Al igual que ocurre con los ejes X e Y, esta función admite un único parámetro, cuyo valor será numérico en unidades de ángulo. Si es positivo, el elemento rotará en el sentido de las agujas del reloj, y si es negativo rotará en el sentido inverso. Por defecto, el punto de rotación es el centro geométrico del elemento.

A continuación mostramos un ejemplo similar a los anteriores, pero esta vez rotando el elemento interior, de color turquesa, a través del eje de la profundidad (Z), que es un pequeño punto centrado al elemento.

Código CSS:

.rotarZ {
  transform: rotateZ(60deg);
}

Resultado:

A

R

En este ejemplo se puede apreciar que el elemento ha rotado sobre sí mismo, a partir de un eje que es perpendicular a nuestro punto de vista.

La función ‘rotate()’

La función rotate() permite definir un tipo de rotación en la que el elemento gira sobre sí mismo. El efecto visual es muy similar al que obtendríamos rotando un objeto a través de su eje Z, el de la profundidad, con la propiedad rotateZ(), pero en este caso se evita que haya ningún tipo de deformación.

El único parámetro que admite la función rotate() es un valor numérico que mide un ángulo. Si se introduce un valor positivo, el elemento rotará en el sentido de las agujas del reloj; y si es negativo, rotará en el sentido inverso. Una rotación de 180 grados dejará el elemento invertido verticalmente.

En este ejemplo de la función rotate() vamos a rotar un elemento sobre sí mismo, indicando que queremos girarlo 20 grados en sentido opuesto.

Código CSS:

.rotar {
  transform: rotate(-20deg);
}

Resultado:

A

R

Tal y como se puede apreciar, el resultado es muy similar al que obtuvimos con la función rotateZ(). Sin embargo, en este caso estamos rotando un elemento sobre sí mismo, mientras que la otra función permite forzar una rotación en el eje de la Z cuando se trabaja con espacios 3D.

La función ‘rotate3d()’

La función rotate3d() es una abreviatura (shorthand) que unifica las funciones CSS relativas a la rotación específica para los ejes horizontal (X), vertical (Y) y de profundidad (Z). Por tanto, permite rotar objetos en un espacio 3D.

En un espacio tridimensional, la rotación tiene tres grados de libertad, que de forma conjunta describen un ángulo de rotación. Por esta razón, la función rotate3d() admite cuatro parámetros: tres son referentes a un factor de rotación para cada uno de los ejes, y el cuarto se refiere al ángulo deseado.

Este método de definición es más flexible de lo que parece, aunque no sea muy intuitivo a primera vista. Vamos a ver algunos ejemplos de uso.

.ejemplos {
  /* Rota 70 grados en X */
  transform: rotate3d(1, 0, 0, 70deg);

  /* Rota 45 grados en Y y Z */
  transform: rotate3d(0, 1, 1, 45deg);

  /* Rota 80 grados en X, Y y Z */
  transform: rotate3d(1, 1, 1, 80deg);

  /* Rota 40 grados en X, 80 en Y y 160 en Z */
  transform: rotate3d(0.5, 1, 2, 80deg);
}

En el siguiente ejemplo vamos a rotar el cuadrado de color turquesa en los tres ejes. En concreto, 60 grados en los ejes X e Y, y -30 grados en el eje Z. También vamos a crear un contenedor 3D, es decir, usando la propiedad transform-style con el valor preserve-3d, así visualizaremos mejor la rotación.

Código CSS:

.contenedor3d {
  background: #ff7f2aaa;
  border: 1px solid #ff7f2a;
  display: inline-block;
  height: 40px;
  transform-style: preserve-3d;
  width: 40px;
}

.rotar3d {
  transform: rotate3d(1, 1, -0.5, 60deg);
}

Resultado:

A

R

El vector de rotación ha dejado nuestro cuadrado turquesa inclinado en los tres ejes, por lo que se ve un poco deformado y medio escondido por debajo del plano del elemento contenedor.

La propiedad ‘rotate’

La propiedad CSS rotate permite especificar transformaciones de rotación de forma independiente, sin tener que usar la propiedad transform, ya que es una propiedad en sí misma. Aunque también rota elementos en un espacio 3D, se utiliza de forma diferente respecto a la función rotate3d().

Esta propiedad admite uno, dos o cuatro valores, siendo none el valor por defecto, con el que no se aplica ninguna transformación de rotación. A continuación se muestra las diferentes posibilidades para especificar valores.

Un valor: se puede introducir un único valor numérico y decimal que estará en unidades de medida de ángulo. El resultado es equivalente a rotar el elemento a través del eje Z, como si estuviéramos usando rotateZ().

.un-valor {
  rotate: 45deg;
  rotate: 1.2turn;
  rotate: 3rad;
}

Dos valores: permiten especificar el eje que queremos usar (X, Y o Z) y el ángulo que queremos aplicar. A diferencia del anterior, en este caso podemos indicar un eje del espacio tridimensional. El valor será numérico.

.dos-valores {
  rotate: x 20deg;
  rotate: y 4.2turn;
  rotate: z 0.5rad;
}

Cuatro valores: en este caso, el funcionamiento es idéntico al de la función rotate3d(). En los tres primeros valores se indica un factor de rotación, y en el cuarto valor se indica el ángulo deseado.

.cuatro-valores {
  rotate: 0.5 1.2 2.4 30deg;
  rotate: 1 2 3 2rad;
  rotate: 0 1 2 5grad;
}

Vamos a ver un ejemplo de contenedor 3D indicando una rotación de -45 grados en los ejes horizontal (X) y vertical (Y); sin rotación en profundidad (Z).

Código CSS:

.prop-rotar {
  rotate: 1 1 0 -45deg;
}

Resultado:

A

R