Функция skew

La función skew define la inclinación de un elemento, transformándolo así de un rectángulo en un paralelogramo. Se utiliza junto con la propiedad transform. El valor de la propiedad es un ángulo en cualquier unidad de ángulos. La inclinación se realiza alrededor del punto definido por la propiedad transform-origin.

Puede aceptar uno o dos parámetros, separados por comas. Si hay dos parámetros, el primero define la inclinación horizontal y el segundo la vertical. Si solo hay un parámetro, este define la inclinación horizontal (y no en ambos ejes). Los parámetros pueden ser tanto positivos como negativos.

Sintaxis

cssselector {
  transform: skew(uno o dos ángulos);
}

Ejemplo

En este ejemplo, el bloque está inclinado 30 grados hacia la izquierda:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Ejemplo

En este ejemplo, el bloque está inclinado 30 grados hacia la derecha:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Ejemplo

En este ejemplo, el bloque está inclinado 30 grados verticalmente (valor positivo):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Ejemplo

En este ejemplo, el bloque está inclinado 30 grados verticalmente (valor negativo):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, -30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Ejemplo

Definimos la inclinación simultáneamente en los ejes X e Y:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Véase también