Skew

La geometría del movimiento y la energía visual

Las líneas horizontales y verticales transmiten estabilidad y orden. Son las líneas de la arquitectura, de las tablas de datos, de los formularios. Pero hay marcas y productos digitales que necesitan transmitir algo diferente: velocidad, energía, dinamismo, ruptura. Para ellos, la diagonal es el lenguaje visual de elección.

¿Has visto cómo las páginas de Nike, Adidas o cualquier marca de deportes tienen secciones que cortan en diagonal? ¿O cómo ciertos botones tienen una silueta cortada en ángulo? Eso es skew en acción.

¿Qué es skew()?

skew() inclina o "cizalla" un elemento a lo largo de uno o ambos ejes. A diferencia de rotate() que gira el elemento como una rueda, skew lo distorsiona como si lo empujaras desde la parte superior mientras lo anclas desde abajo.

• skewX(15deg): Inclina el elemento sobre el eje horizontal. La parte superior se mueve a la derecha, la inferior a la izquierda (o viceversa con negativos).
• skewY(10deg): Inclina el elemento sobre el eje vertical. La parte izquierda sube, la derecha baja (o al revés).
• skew(15deg, 10deg): Aplica ambos ejes simultáneamente.

El truco del contenido compensado

Cuando aplicas skewX(-10deg) a un div, todo su contenido también se inclina: el texto, las imágenes, los botones. Si quieres que el "marco" esté inclinado pero el contenido interior se vea recto (como en los banners de las tiendas de moda), necesitas aplicar la transformación inversa al contenedor del contenido:

.seccion-inclinada {
  transform: skewX(-10deg);
}

.seccion-inclinada .contenido {
  /* El valor opuesto cancela el skew del padre */
  transform: skewX(10deg);
}

Separadores de sección: el uso más frecuente

Una de las aplicaciones más populares de skewY() en landing pages modernas es crear separadores de sección con cortes diagonales. En lugar de un borde recto horizontal entre sección y sección, usas un bloque con skewY(-3deg) que crea una transición diagonal dinámica. Es un recurso visual poderoso que da movimiento y dirección a la composición de la página.