💻 Deformaciones 2D Las funciones CSS skewX() y skewY()

Por último, las funciones de deformación establecen un ángulo para torcer, tumbar o inclinar un elemento en 2D. A diferencia de las anteriores, no tiene función correspondiente para 3D.

Funciones de deformación

Las funciones de deformación disponibles en CSS son las siguientes:

Funciones	Significado
skewX(xdeg)	Establece un ángulo de xdeg para una deformación 2D respecto al eje X.
skewY(ydeg)	Establece un ángulo de ydeg para una deformación 2D respecto al eje Y.

Algunos ejemplos de uso de estas funciones, serían las siguientes:

.element {
  transform: skewX(-5deg);
  transform: skewY(25deg);

  transform: skewX(5deg) skewY(15deg);
}

Aunque la función skew() existe, no debería ser utilizada, ya que está marcada como obsoleta y serán retiradas de los navegadores en el futuro. En su lugar deberían utilizarse skewX() o skewY(), ya sea individualmente por separado o combinadas separando por espacio.

Bibliografía:

https://lenguajecss.com/css/transformaciones/transform-skew/