Hay muchos momentos en el proceso de diseño de una página web en los que necesitaremos modificar ciertas características de nuestros elementos. Las transformaciones en CSS nos permiten modificar características de posición, tamaño y aspecto, ya sea para darle un estilo distinto al elemento o para crear diferentes estados en un mismo elemento. Por eso, en este post, te explicaremos cómo funciona la propiedad skew de CSS, una de las transformaciones básicas de CSS.
¿Qué son las transformaciones en CSS?
Las transformaciones en CSS son un conjunto de propiedades que nos permiten modificar las características de posición, tamaño y aspecto al trasladar, rotar, escalar o distorsionar un elemento. Las transformaciones en CSS pueden usarse con dos propósitos distintos. Primero, podemos usarlas simplemente para darle un estilo distinto a un elemento; por ejemplo, podemos usar la propiedad translate para definir la posición de un elemento sin utilizar sistemas de posicionamiento clásico, Flexbox o CSS Grid. Del mismo modo, podemos usar las demás propiedades de transformación para alterar las características del elemento.
El segundo propósito por el que se usan las transformaciones en CSS es para crear transiciones. Al insertar las propiedades de transformación en un atributo de clase distinto al elemento original, creamos un estado distinto en un mismo elemento. Es decir, podemos tener un elemento con su aspecto original y, luego, el mismo elemento distorsionado. Usando estos dos estados, podemos insertar una transición, haciendo que un elemento se transforme de manera suave, lo que crea la ilusión de una animación.
¿Cómo funciona la propiedad skew de CSS?
La propiedad skew de CSS nos permite distorsionar un elemento usando los ángulos creados entre sus líneas horizontales y verticales. Aunque la unidad de medida más usada para crear esta transformación son los grados (deg), la explicación de la página oficial Mozilla Developer Network sobre esta propiedad tiene ejemplos con las unidades turn y rad.
Al igual que todas las demás transformaciones en CSS, la propiedad skew de CSS es realmente un conjunto de varias propiedades, cada una con la habilidad de modificar un eje distinto. Estas son:
skewX
La propiedad skewX nos permite distorsionar un elemento utilizando los ángulos del eje horizontal. El valor que definamos para esta propiedad trasladará las líneas horizontales del elemento, una hacia la derecha y otra hacia la izquierda. Esto es el resultado de transformar el ángulo existente entre la línea horizontal y la línea vertical.
Entonces, supongamos que tenemos un rectángulo. Este rectángulo tiene un ángulo natural de 90 grados. Al aplicar la propiedad skewX: 45deg, el elemento se transformará de manera que la línea vertical se distorsione para crear un ángulo de 45 grados con respecto a la línea horizontal. Esto hará que el rectángulo parezca ponerse de costado, al igual que lo hace una tipografía cuando le damos la propiedad itálica.
skewY
La propiedad skewY es el opuesto de la propiedad skewX, pues distorsiona el elemento al trasladar las líneas verticales, una hacia arriba y otra hacia abajo. Esta distorsión sucede porque el ángulo original del elemento se transforma en el eje Y. Al igual que su contraparte, esta propiedad se utiliza comúnmente con la unidad de medida deg.
skew
Al igual que la propiedad translate, la propiedad skew de CSS funciona como una unión de las propiedades que modifican cada eje. Entonces, lo que nos permite hacer esta propiedad es definir las distorsiones de los ejes en una sola línea de código al insertar dos valores. El primer valor representa skewX y el segundo valor representa la distorsión de skewY. Una forma de escribir esta propiedad sería transform: skew (90deg, 180deg).También podemos utilizar esta propiedad para determinar el eje X, pues si solo escribimos un valor, el valor automático de skewY será 0.
Sabemos que la propiedad skew de CSS es difícil de entender con solo palabras. Por ello, te invitamos a probarla tú mismo con los simuladores publicados por w3schools. El simulador de skewX nos permite distorsionar el elemento con los valores en el eje X. Aunque no tienen un simulador de skewY, tienen un simulador para la propiedad skew, en la que eliges los valores de cada eje. Con ella, puedes insertar el valor 0deg en el eje X y ver cómo se distorsiona un elemento cuando solo modificamos su eje Y.
¿Te animas a seguir aprendiendo?
Después de leer este post, sabes todo lo necesario para empezar a aplicar distorsiones en tus elementos usando la propiedad skew de CSS. Pero en KeepCoding sabemos que, con cada post que lees sobre las propiedades de CSS, ¡crecen tus ganas de seguir aprendiendo sobre diseño web! Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, una formación intensiva donde no solo seguirás aprendiendo sobre CSS, sino que también pondrás en práctica estos conocimientos al crear y diseñar tu propia página web.
Además, aprenderás todo lo necesario para que, en pocos meses, puedas ser un experto del desarrollo web. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Anímate a inscribirte y destaca en el sector tecnológico!
