Deformaciones 2D

Las funciones CSS skewX() y skewY()

css ᐳ Escalado 2D ᐳ Deformaciones 2D ᐳ Transformaciones 3D

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.

Tabla de contenidos