Deslocar-girar - CSS-Tricks | CSS Almanac 2025

Esta propriedade começou como motion-rotation, então se tornou offset-rotation, agora é offset-rotate. Ainda é uma propriedade experimental do Working Draft, então ?‍♀️. Se você vai usá-lo, também pode usar o que for mais recente.

A offset-rotatepropriedade em CSS controla o ângulo de um elemento dependendo de sua offset-distanceextensão a offset-path.

Imagine que o elemento animado ao longo de um caminho seja um pequeno carro de corrida. Conforme o carro de corrida se move ao longo do caminho, ele realmente precisa girar para que a frente do carro fique voltada para a direção em que está se movendo, caso contrário, parecerá estranho e não natural. Felizmente, o valor padrão para offset-pathé autoexatamente isso.

Veja esta demonstração:

Veja o Pen
scalextric car on motion-path por Chris Coyier (@chriscoyier)
no CodePen.

Valores possíveis

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* fixed angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Suporte de navegador

As offset-*propriedades ainda são consideradas um recurso experimental no momento da redação deste artigo. Se a atual falta de suporte ao navegador o deixa hesitante em usá-lo em um projeto, você pode considerar o uso de GSAP para este nível de animação. Isso oferecerá a você o suporte de navegador mais amplo no momento.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.