Curso optativo

Recomendação de curso:

CSS skewX() função skewX() Definição e uso do CSS

skewX() A função é usada para inclinar elementos ao longo do eixo x a um ângulo especificado. transform usado na propriedade.

Dica:skewX(a) É equivalente a skew(a, 0)!

Exemplo

Exemplo 1

Usar skewX() Incline vários elementos <div> ao longo do eixo x a um ângulo especificado:

#myDiv1 {
  transform: skewX(15deg);
}
#myDiv2 {
  transform: skewX(30deg);
}
#myDiv3 {
  transform: skewX(-25deg);
}

Experimente você mesmo

Exemplo 2

Usar skewX() Incline a imagem ao longo do eixo x a um ângulo especificado:

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

Experimente você mesmo

Sintaxe do CSS

skewX(a)
Valor Descrição
a Obrigatório. Ângulo. Especifica a inclinação ao longo do eixo x.

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 completamente essa função pela primeira vez.

Chrome Edge Firefox Safari Ópera
1 12 3.5 3.1 10.5

Páginas relacionadas

Tutorial:Transformações 2D do CSS

Referência:Propriedade transform do CSS

Referência:Função skew() do CSS

Referência:Função skewY() do CSS