Функция skewX

La función skewX define el sesgado de un elemento a lo largo del eje X, transformándolo así en un paralelogramo. Se utiliza junto con la propiedad transform. El valor de la propiedad es un ángulo en cualquier unidad de medida de ángulos. El ángulo puede ser positivo o negativo. Un valor positivo realiza un sesgado hacia la izquierda, y uno negativo, hacia la derecha. El sesgado se realiza alrededor del punto definido por la propiedad transform-origin.

Sintaxis

cssselector {
  transform: skewX(ángulo);
}

Ejemplo

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

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

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

Результат:

Ejemplo

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

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

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

Результат:

Véase también