Recomendação de curso:

Função skew() do CSS

Definição e uso skew() Da CSS

skew() A função é usada para inclinar elementos ao longo dos eixos x e y com os ângulos fornecidos. transform Usado na propriedade.

Exemplo

Exemplo 1

Uso skew() Inclinar vários elementos <div>:

#myDiv1 {
  transform: skew(15deg);
}
#myDiv2 {
  transform: skew(15deg, 15deg);
}
#myDiv3 {
  transform: skew(-15deg);
}

Experimente você mesmo

Exemplo 2

Uso skew() Imagem inclinada:

#img1 {
  transform: skew(25deg);
}
#img2 {
  transform: skew(-25deg);
}
#img3 {
  transform: skew(10deg, 10deg);
}

Experimente você mesmo

Sintaxe do CSS

skew(ax, ay)
Valor Descrição
ax Obrigatório. Ângulo. Especifica a inclinação ao longo do eixo x.
ay Opcional. Ângulo. Especifica a inclinação ao longo do eixo y. Se omitido, o valor é definido como 0.

Detalhes técnicos

Versão: Módulo de Transforms do CSS Level 1

Suporte do navegador

Os números na tabela representam a versão do navegador que suportou plenamente essa função pela primeira vez.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Páginas relacionadas

Tutorial:Transformações 2D CSS

Referência:A propriedade CSS transform

Referência:A função CSS skewX()

Referência:A função CSS skewY()