los skew()CSSLa función define una transformación que sesga un elemento en el plano 2D. Su resultado es un tipo de datos.

Esta transformación es un mapeo de corte (transvección) que distorsiona cada punto dentro de un elemento en un cierto ángulo en las direcciones horizontal y vertical. El efecto es como si agarraras cada esquina del elemento y las tiraras a lo largo de un cierto ángulo.

Las coordenadas de cada punto se modifican por un valor proporcional al ángulo especificado y la distancia al origen. Por lo tanto, cuanto más lejos del origen está un punto, mayor es el valor que se le agrega.

Sintaxis

los skew() La función se especifica con uno o dos valores, que representan la cantidad de sesgo que se aplicará en cada dirección. Si solo especifica un valor, se usa para el eje x y no habrá sesgos en el eje y.

skew(ax)skew(ax, ay)

Valores

ax
Es un que representa el ángulo que se utilizará para distorsionar el elemento a lo largo del eje x (o abscisas).
ay
Es un que representa el ángulo que se utilizará para distorsionar el elemento a lo largo del eje y (u ordenadas). Si no está definido, su valor predeterminado es 0, lo que resulta en un sesgo puramente horizontal.
Coordenadas cartesianas en ℝ2 Coordenadas homogéneas en ℝℙ2 Coordenadas cartesianas en ℝ3 Coordenadas homogéneas en ℝℙ3
1broncearse(hacha)broncearse(sí)1 1broncearse(hacha)0broncearse(sí)10001 1broncearse(hacha)0broncearse(sí)10001 1broncearse(hacha)00broncearse(sí)10000100001
[1 tan(ay) tan(ax) 1 0 0]

Ejemplos de

Inclinación solo en el eje x

HTML

<div>Normaldiv><divclass="skewed">Skeweddiv>

CSS

bodymargin: 20px;divwidth: 80px;height: 80px;background-color: skyblue;.skewedtransform:skew(10deg);/* Equal to skewX(10deg) */background-color: pink;

Resultado

Inclinación en ambos ejes

HTML

<div>Normaldiv><divclass="skewed">Skeweddiv>

CSS

bodymargin: 20px;divwidth: 80px;height: 80px;background-color: skyblue;.skewedtransform:skew(10deg, 10deg);background-color: pink;

Resultado

Especificaciones

Especificación Estado Comentario
CSS transforma el nivel 1
La definición de ‘sesgar ()’ en esa especificación.		 Borrador de trabajo Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
skew() 1 12 3,5[“Firefox 14 removed experimental support for skew(), but it was reintroduced in Firefox 15.”, “Before Firefox 16, the translation values of matrix() and matrix3d() could be s, in addition to the standard .”] 9Internet Explorer 9 admite transformaciones 2D pero no 3D. En la versión 9, la combinación de funciones de transformación 2D y 3D invalida toda la propiedad. 10,5 3.1 2 18 4 11 3.2 1.0
3d 12 12 10 10 15 4 3 18 10 14 3.2 1.0

Ver también

  • transform
  • sesgarX ()
  • sesgado ()