Propriedade Rotate
Última atualização: 2026-09-13
rotate Propriedade Rotate
A propriedade rotate é uma propriedade de transformação individual que rotaciona um elemento em torno de um eixo especificado no espaço 2D ou 3D. Como propriedade independente, pode ser controlada separadamente de outras transformações como translate e scale, o que é especialmente útil quando você deseja animar o ângulo de rotação por conta própria.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
rotate: none | <angle> | [ x | y | z | <number>{3} ] <angle>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem rotação |
<angle> | Tipo | O ângulo de rotação |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| rotate | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Quando nenhum eixo é informado, o elemento rotaciona em torno do eixo Z (perpendicular à tela). Você pode especificar o eixo x, y ou z, ou um vetor personalizado, para rotação 3D.
Dica： Valores positivos rotacionam no sentido horário quando se olha ao longo do eixo em sua direção positiva; valores negativos rotacionam no sentido anti-horário.
❓ Perguntas Frequentes
QComo faço um elemento balançar para a frente e para trás em vez de girar continuamente?
AReproduza a animação alternando nos dois sentidos: use animation-direction: alternate e escreva dois quadros-chave, como rotate: -10deg no quadro from e rotate: 10deg no quadro to. Quando apenas o quadro to é escrito, o quadro 0% usa automaticamente o estado inicial do elemento. Você também pode alternar uma classe com JavaScript combinado a uma transição.
QA propriedade rotate é a mesma que transform: rotate() no CSS?
AVisualmente são idênticas — ambas rotacionam em torno do eixo especificado. A diferença é que a propriedade rotate independente pode ser animada por conta própria sem afetar o translate, a scale ou outras transformações já presentes em transform, o que é conveniente para controlar cada dimensão separadamente. Já transform: rotate() deve ser escrita na mesma lista das outras funções de transform, e a ordem da lista importa quando você a altera.
QQuais eixos de rotação o rotate suporta? Como rotaciono em torno de X ou Y?
ASem eixo escrito, a rotação assume por padrão o eixo Z (perpendicular à tela), equivalente a rotateZ. Use rotate: x 45deg para o eixo X, rotate: y 45deg para o eixo Y, ou um vetor personalizado como rotate: 1 1 0 45deg. Rotações em torno de X ou Y precisam de uma perspectiva no elemento pai para mostrar profundidade real.
QO rotate suporta ângulos negativos ou ângulos acima de 360 graus?
ASim. rotate: -45deg rotaciona 45 graus no sentido anti-horário, e um valor acima de 360deg, como 720deg, mostra duas voltas completas durante uma animação. Os ângulos aceitam unidades deg, grad, rad e turn — 0,25turn equivale a 90deg. Observe que, em estilos estáticos, 360deg e 0deg parecem iguais, mas em uma animação a rotação completa é renderizada.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
