A propriedade CSS rotate

Definição e uso

rotate A propriedade permite girar o elemento.

rotate A propriedade define um valor que representa o grau de rotação do elemento ao redor do eixo z. Para girar o elemento ao redor do eixo x, y ou de outra forma, é necessário fazer a definição correspondente.

rotate O valor da propriedade pode ser um ângulo, nome do eixo + ângulo ou três valores + ângulo.

• Se apenas um ângulo for fornecido, o elemento será girado no sentido horário ao redor do eixo z.
• Se o nome do eixo + ângulo for fornecido, o elemento será girado no sentido horário ao redor do eixo especificado.
• Se três valores + ângulo forem fornecidos, esses três valores definem um vetor, ao redor do qual o elemento será girado.

Para entender melhor rotate propriedade, vejaDemonstração.

Notas:Outra técnica para girar elementos é usar Função rotate() do CSS da propriedade CSS transform.

Exemplo

Exemplo 1

Alterar a rotação do elemento:

div {
  rotate: 30deg;
}

Experimente você mesmo

Exemplo 2

quando rotate Quando a propriedade é configurada para vetor e ângulo, o elemento será girado ao redor do vetor.

Aqui, o vetor é [1 1 0] no plano bidimensional, com coordenadas x e y, e então girado 60 graus:

div {
  rotate: 1 1 0 60deg;
}

Experimente você mesmo

Sintaxe CSS

rotate: eixo angle|initial|inherit;

Valor da propriedade

Detalhes técnicos

Suporte do navegador

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

Páginas relacionadas

Tutorial:Transformações 2D CSS

Tutorial:Transformação 3D CSS

Referência:A propriedade CSS scale

Referência:Atributo translate do CSS