Recomendação de curso:

Função rotate() do CSS

Definição e uso rotate() do CSS

rotate() A função define a rotação 2D do elemento. transform usado na propriedade.

Exemplo

Exemplo 1

Usar rotate() Rotação de múltiplos elementos <div>:

#myDiv1 {
  transform: rotate(25deg);
}
#myDiv2 {
  transform: rotate(45deg);
}
#myDiv3 {
  transform: rotate(-45deg);
}

Experimente você mesmo

Exemplo 2

Usar rotate() Rotação de imagens:

#img1 {
  transform: rotate(90deg);
}
#img2 {
  transform: rotate(45deg);
}
#img3 {
  transform: rotate(-45deg);
}

Experimente você mesmo

Sintaxe do CSS

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

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

  • deg（graus）
  • rad（raio)
  • turn（rotação）

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 suporta completamente 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 do CSS

Referência:Propriedade transform do CSS

Referência:A propriedade CSS rotate

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

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

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

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