El proceso de diseño en CSS implica muchas veces la modificación de características de los elementos de nuestra página web. Aunque CSS tiene muchas propiedades, una de las maneras para modificar nuestros elementos es con las transformaciones de CSS. En este post, te explicamos cómo funciona la propiedad rotate de CSS, una de las transformaciones básicas de CSS.
¿Cómo funciona la propiedad rotate de CSS?
La propiedad rotate de CSS forma parte del conjunto de propiedades que conforman las transformaciones de CSS. Estas transformaciones nos permiten modificar las características de posición, aspecto y tamaño de un elemento. La propiedad rotate de CSS en específico nos permite transformar un elemento al rotarlo sobre sus distintos ejes.
La unidad de medida más común para rotar nuestros elementos es deg, que representará los grados con los que se rota el elemento. Sin embargo, también se pueden usar las unidades turn (número de vueltas del ángulo) y rad (ángulo en radianes). Te invitamos a aprender más sobre estas unidades en el artículo sobre <angle> de la MDN.
Al igual que las demás transformaciones, la propiedad rotate de CSS contiene varias propiedades. Cada una de las opciones que mostamos a continuación nos permite rotar nuestro elemento de maneras distintas.
rotate
Esta propiedad nos permite rotar de manera bidimensional el elemento con respecto a un punto fijo. Por defecto, el punto fijo del elemento es su centro. Entonces, el valor que determinemos en esta propiedad definirá cuántos grados rota el elemento. Si el valor es positivo, la rotación se dará en el sentido de las agujas del reloj. Si el valor es negativo, la rotación sucederá en el sentido contrario.
rotateX, rotateY, rotateZ
Estas tres propiedades nos permiten rotar los elementos en un espacio tridimensional. Es decir, nos permiten rotar los elementos en los distintos ejes del espacio. Entonces, el eje X acostará el elemento y el eje Y lo volteará. Para entender mejor cómo estas propiedades transforman el elemento, te invitamos a ver las demostraciones publicadas por w3schools.
rotate3d
Esta propiedad nos permite unir en una sola línea de código las rotaciones tridimensionales rotateX, rotateY y rotateZ. Con esta propiedad podemos definir los tres valores en un solo lugar. Al escribir transform: rotate3d (100deg, 45deg, 40deg) estamos definiendo primero el valor de la rotación en el eje X, luego la rotación en el eje Y y, finalmente, la rotación en el eje Z.
¿Qué sigue?
Ahora que sabes cómo la propiedad rotate de CSS nos permite modificar la apariencia de los elementos en nuestra página web, ¡es el momento de que te animes a crear y diseñar tu propia página web! Por ello, te invitamos a seguir aprendiendo con nosotros en nuestro Desarrollo Web Full Stack Bootcamp. Además de aprender sobre las propiedades que nos ofrece CSS, descubrirás todo lo necesario para ser un experto en desarrollo web en pocos meses. ¡Inscríbete!
