Função skewY

A função skewY define a inclinação de um elemento no eixo Y, transformando-o 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 inclina o elemento para cima, um valor negativo - para baixo. A inclinação é realizada em torno do ponto definido pela propriedade transform-origin.

Sintaxe

cssseletor {
  transform: skewY(ângulo);
}

Exemplo

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

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

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

Результат:

Exemplo

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

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

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

Результат:

Veja também