Recomendação de curso:

Função rotateZ() do CSS

Definição e uso rotateZ() CSS

rotateZ() A função define a rotação 3D de um elemento ao redor do eixo z. transform usado na propriedade.

Dica:rotateZ(angle) Igual a rotate(angle).

Exemplo

Exemplo 1

Usar rotateZ() Gire vários elementos <div> ao redor do eixo z:

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

Experimente você mesmo

Exemplo 2

Usar rotateZ() Gire a imagem ao redor do eixo z:

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

Experimente você mesmo

Sintaxe do CSS

rotateZ(angle)
Valor Descrição
angle

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

  • deg（graus）
  • rad（rado）
  • turn（circulo）

Detalhes técnicos

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

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Páginas relacionadas

Tutorial:Transformações 3D do 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 rotateX() do CSS

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