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.
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.
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); */
}
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev