A medida que la web se ha modernizado, el proceso de diseño de una página web se ha vuelto más complejo. Hoy en día, encontramos todo tipo de efectos visuales que los diseñadores crean para llamar la atención del usuario. En este post, te presentaremos las transformaciones en CSS, un conjunto de propiedades que nos permiten modificar algunas características de nuestros elementos para crear efectos visuales.
¿Qué son las transformaciones en CSS?
Las transformaciones en CSS son un conjunto de propiedades que nos permiten modificar las coordenadas en las que se encuentra un elemento. Existen cuatro tipos de transformaciones en CSS, cada uno con distintas propiedades. Con ellas, podemos hacer que los elementos sean trasladados, rotados, escalados o distorsionados. A continuación, te explicamos qué hace cada una de estas transformaciones.
Ten presente que, para todas las propiedades que te presentaremos a continuación, deberás insertar la propiedad transform y, después, la opción que desees con sus valores específicos.
Trasladar
Las transformaciones en CSS que nos permiten trasladar un elemento lo que hacen es desplazarlo en el eje vertical, horizontal o ambos. Para hacer esto, podemos utilizar las opciones translate, translateX o translateY. Si utilizamos la opción translate, podemos insertar un valor para el desplazamiento en Y y otro valor para el desplazamiento en X.
Rotar
Las transformaciones de tipo rotar (rotate en CSS) nos permiten girar el elemento usando valores con la unidad de medida deg. Entonces, al insertar la propiedad transform: rotate (45deg) le estamos diciendo al navegador que queremos rotar el elemento 45 grados. Al igual que en las demás propiedades, también hay opciones para rotar en ejes: rotateX y rotateY.
Escalar
Las transformaciones en CSS que nos permiten escalar un elemento requieren que definamos la proporción con la que queremos cambiar el tamaño del elemento. Esto lo hacemos con la opción scale. Dentro de esta opción hay dos valores, el primero determina la escala en el eje y y el segundo, en el eje x.
También podemos utilizar las opciones para determinar escalas por separado, scaleX y scaleY. Si escribimos, por ejemplo, transform: scale (1.5, 1.5), le estamos diciendo al navegador que queremos multiplicar el tamaño actual del elemento por 1.5 en ambos ejes.
Distorsionar
Las transformaciones en CSS que nos permiten distorsionar un elemento son skew, skewX y skewY. Con estas propiedades, podemos deformar un elemento en cada eje o en ambos al mismo tiempo. Pensemos en esta distorsión como cuando modificamos una tipografía para estar en itálica, esta es una distorsión en el eje X, pues mueve las líneas horizontales de la tipografía hacia los lados. Una distorsión en el eje Y hace lo opuesto, mueve las líneas verticales del bloque hacia arriba y abajo.
Para ver en vivo y en directo cómo estas transformaciones en CSS afectan a un elemento, te invitamos a ver esta demostración hecha y publicada por w3schools, en donde puedes clicar en cada transformación para ver cómo afecta al elemento en azul.
Después de leer este post, conoces lo básico sobre transformaciones en CSS. Pero ¿cómo puedes pasar de este conocimiento básico a ser un experto? En KeepCoding creemos que la mejor manera de hacer esto es jugar con tus propias líneas de código. Por ello, te invitamos a que no solo sigas aprendiendo sobre los lenguajes de programación para la web, sino a que también pongas en práctica estos conocimientos. ¿Y qué mejor lugar para hacer esto que en un bootcamp intensivo que mezcla la teoría con la práctica?
Así es, KeepCoding tiene el bootcamp perfecto para ti. Con nuestro Desarrollo Web Full Stack Bootcamp serás un experto en pocos meses y tendrás como comprobarlo, pues crearás y diseñarás tu propia página web con ayuda de nuestros profesores. ¡No te lo pierdas e inscríbete ya!
