Recomendação de curso:

Função rotateX() CSS

Definição e uso rotateX() CSS

rotateX() A função define a rotação 3D do elemento em torno do eixo x (direção horizontal). transform usado na propriedade.

Exemplo

Exemplo 1

Usar rotateX() Gire vários elementos <div> em torno do eixo x (direção horizontal):

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

Experimente você mesmo

Exemplo 2

Usar rotateX() Gire a imagem em torno do eixo x (direção horizontal):

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

Experimente você mesmo

Sintaxe CSS

rotateX(ângulo)
Valor Descrição
ângulo

Obrigatório. Especifica o ângulo de rotação. Unidades possíveis:

  • deg（grau）
  • rad（raio)
  • turn（círculo）

Detalhes técnicos

Versão: Módulo de Transformações CSS Level 2

Suporte do navegador

Os números das navegadores indicam a versão inicial que suporta completamente essa função.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Páginas relacionadas

Tutorial:Transformações 3D CSS

Referência:Propriedade transform do CSS

Referência:A propriedade CSS rotate

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

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

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

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