Inclinación con skewX y skewY

Mientras pasa la noche en una cueva poco acogedora, Pendalf decide aprovechar el tiempo para estudiar un poco más de magia CSS.

Otra posibilidad de las transformaciones CSS es inclinar un objeto un ángulo determinado por los ejes X e Y. Para eso se utilizan las funciones skewX y skewY.

El ángulo puede expresarse en grados, deg. Por ejemplo:

transform: skewX(45deg)
transform: skewY(30deg)

En el eje X, un ángulo positivo inclina el objeto hacia la izquierda y uno negativo, hacia la derecha. En el eje Y, lo inclina hacia abajo y hacia arriba, respectivamente.

En este ejemplo, el primer bloque está inclinado 25° hacia la izquierda y el segundo, 25° hacia abajo:

transform: skewX(25deg);transform: skewY(25deg);

Además de skewX y skewY, existe la función skew, que acepta dos argumentos: skew(inclinación-en-X [, inclinación-en-Y]). El segundo es opcional y su valor predeterminado es 0. Sin embargo, usar skew con dos argumentos no produce el mismo resultado que combinar skewX y skewY. Para código nuevo se recomienda usar estas dos últimas funciones. Más adelante veremos ejemplos de skew con un solo argumento: en ese caso equivale a skewX.

¿Y qué crees que pasó? Apenas aprendió el nuevo hechizo, Pendalf recibió la visita de un monstruo de las cavernas que se parecía un poco a un dragón. Algo le decía que las bolas de fuego no convencerían al visitante de marcharse…