Função skew

A função skew define a inclinação de um elemento, transformando-o assim de um retângulo em um paralelogramo. É usada em conjunto com a propriedade transform. O valor da propriedade é um ângulo em qualquer unidade de ângulos. A inclinação é realizada em torno do ponto definido pela propriedade transform-origin.

Pode aceitar um ou dois parâmetros, listados separados por vírgula. Se houver dois parâmetros - o primeiro parâmetro define a inclinação horizontal, e o segundo - a vertical. Se houver apenas um parâmetro - ele define a inclinação horizontal (e não em ambos os lados). Os parâmetros podem ser positivos ou negativos.

Sintaxe

cssseletor {
  transform: skew(um ou dois ângulos);
}

Exemplo

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

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

css#elem {
  transform: skew(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: skew(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Exemplo

Neste exemplo, o bloco é inclinado em 30 graus na vertical (valor positivo):

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

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

Результат:

Exemplo

Neste exemplo, o bloco é inclinado em 30 graus na vertical (valor negativo):

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

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

Результат:

Exemplo

Definindo a inclinação simultaneamente nos eixos X e Y:

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

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

Результат:

Veja também