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 |
rotateY(y) | Establece una rotación 2D en |
rotateZ(z) | Establece una rotación 2D en |
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); */
}
