Função skewX

A função skewX define a inclinação de um elemento no eixo X, transformando-o assim em um paralelogramo. É usada em conjunto com a propriedade transform. O valor da propriedade é um ângulo em qualquer unidade de ângulo. O ângulo pode ser positivo ou negativo. Um valor positivo faz a inclinação para a esquerda, um negativo - para a direita. A inclinação é feita em torno do ponto definido pela propriedade transform-origin.

Sintaxe

cssseletor {
  transform: skewX(ângulo);
}

Exemplo

Neste exemplo, o bloco é inclinado em 30 graus para a esquerda:

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

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

Результат:

Exemplo

Neste exemplo, o bloco é inclinado em 30 graus para a direita:

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

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

Результат:

Veja também