Sesgar en CSS3

La función CSS skew() se define como la propiedad Transform de CSS3 con una función incorporada que permite sesgar un elemento en el plano bidimensional con algunos parámetros, elige un punto en cualquier eje y lo tira en diferentes direcciones (se inclina un elemento). En otros términos, la transformación de sesgo o corte permite cambiar la apariencia de un elemento como inclinarlo (cambiar o doblar el elemento respectivo con los ejes x e y). Esta transformación CSS3 utiliza una matriz de 4 * 4 para la representación. Este skew() arrastra su línea sola en cualquier lado para distorsionar un elemento.

Sintaxis

La sintaxis funciona así, ya que no hay una declaración específica sobre las direcciones, la sintaxis general se proporciona a continuación:

skew (ax, ay)

Entonces, esta declaración dice que sesga el elemento -45 grados horizontalmente, que es el ángulo del eje x, y 20 grados verticalmente a lo largo del eje Y en el plano.

Toma dos argumentos ax y ay como valores de ángulo. Aquí ax es el valor predeterminado y el valor se proporciona para el eje Y. Si no se proporciona ningún valor, se supone que es cero. Este sesgo 2D distorsiona un elemento en cualquier dirección y su valor de distancia se calcula en la unidad de grados. Aquí se evitan otras medidas como el porcentaje y los píxeles.

· ax: este parámetro sesga el elemento a lo largo del eje X a lo largo de los lados.

· ay: Este parámetro sesga el elemento a lo largo del eje Y verticalmente en la dirección opuesta.

Aquí los valores que se han asignado en grado dicen el valor positivo para desplazar el elemento a la izquierda y los valores negativos a la derecha. De este modo, una imagen original se inclina mediante el sesgo. Parece una imagen especular en el fondo.

DEMOSTRACIÓN

En el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items

En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como nombre del archivo “2DSkewing.html”, para luego presionar el botón Add.