Propriedade CSS offset-rotate
Use a propriedade CSS offset-rotate para especificar o ângulo de um elemento ao longo do offset-path. Veja valores e exemplos.
A propriedade CSS offset-rotate define a orientação (rotação) de um elemento enquanto ele percorre seu caminho de movimento. Quando um elemento é posicionado com um offset-path e movido com offset-distance, offset-rotate decide se o elemento gira automaticamente para apontar na direção do movimento, aponta no sentido oposto ou mantém um ângulo fixo.
Esta é a propriedade usada quando você quer que uma seta, carro, avião ou qualquer forma direcional "siga a curva" em vez de deslizar rigidamente. Por padrão, um elemento mantém sua orientação original independentemente de como o caminho se curva; offset-rotate: auto faz com que ele gire de modo que sua extremidade dianteira aponte sempre ao longo do caminho.
Nos primeiros rascunhos da especificação, essa propriedade se chamava motion-rotation, depois offset-rotation e, por fim, offset-rotate. Você ainda pode encontrar os nomes antigos em artigos legados, mas apenas offset-rotate é o nome atual.
Referência rápida
| Valor inicial | auto |
|---|---|
| Aplica-se a | Elementos transformáveis |
| Herdada | Não |
| Animável | Sim |
| Valor calculado | A palavra-chave, um ângulo ou ambos |
| Versão | Motion Path Module Level 1 |
| Sintaxe DOM | object.style.offsetRotate = "auto 90deg"; |
Sintaxe
/* keywords */
offset-rotate: auto;
offset-rotate: reverse;
/* a fixed angle */
offset-rotate: 90deg;
offset-rotate: 0.5turn;
/* a keyword plus an angle offset */
offset-rotate: auto 45deg;
offset-rotate: reverse 90deg;auto— o elemento gira para corresponder à direção do caminho em sua posição atual (0deg significa "apontando ao longo do caminho").reverse— igual aauto, mas com uma rotação extra de 180deg, fazendo o elemento apontar para trás ao longo do caminho.<angle>— uma rotação fixa que ignora a direção do caminho. O elemento é rotacionado por este ângulo constante no sentido horário.auto <angle>— combina os dois: segue a direção do caminho e adiciona o ângulo por cima. Esta é a forma mais útil quando sua forma "aponta" em uma direção não padrão (por exemplo, uma seta desenhada apontando para cima precisa deauto 90degpara apontar ao longo de um caminho para a direita).
Um erro comum: offset-rotate só tem efeito quando o elemento realmente possui um offset-path. Sozinha, ela não faz nada — não há direção de caminho para alinhar.
Exemplo: seguindo a direção do caminho
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 40%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 4s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-rotate property example</h2>
<div class="mover"></div>
</body>
</html>No exemplo acima, substitua offset-rotate: reverse; por offset-rotate: auto; para ver a forma apontar para frente em vez de para trás, ou por um valor fixo como offset-rotate: 45deg; para manter uma inclinação constante que ignora completamente a curva.
Exemplo: ângulo fixo vs. auto
Um <angle> fixo mantém a mesma orientação ao longo de todo o caminho, enquanto auto e reverse reorientam em cada ponto. Compare os dois quadrados abaixo:
<!DOCTYPE html>
<html>
<head>
<title>offset-rotate: auto vs. fixed angle</title>
<style>
.track {
position: relative;
height: 160px;
}
.mover {
width: 40px;
height: 40px;
position: absolute;
offset-path: path("M20,80 Q120,0 220,80 T420,80");
animation: move 4s linear infinite;
}
/* turns to follow the curve */
.auto {
background: #1c87c9;
offset-rotate: auto;
}
/* always tilted 45deg, ignores the curve */
.fixed {
background: #8ebf42;
offset-rotate: 45deg;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>auto (blue) follows the curve; 45deg (green) stays fixed</h2>
<div class="track">
<div class="mover auto"></div>
<div class="mover fixed"></div>
</div>
</body>
</html>Suporte a navegadores e acessibilidade
As propriedades de motion-path são suportadas nas versões atuais do Chrome, Edge, Safari e Firefox. Como o efeito é um movimento puramente decorativo, respeite os usuários que preferem menos movimento envolvendo as animações em uma media query:
@media (prefers-reduced-motion: reduce) {
.mover {
animation: none;
}
}Para um controle mais preciso sobre o próprio caminho, consulte offset-path e offset-distance; o atalho offset permite definir todos juntos com offset-rotate em uma única declaração. Se você precisa apenas de uma rotação estática não relacionada a um caminho, use transform.
Valores
| Valor | Descrição |
|---|---|
auto | O elemento é rotacionado para corresponder à direção do offset path em sua posição atual. |
reverse | O elemento é rotacionado para corresponder à direção do caminho mais 180 graus (apontando para trás). |
<angle> | Uma rotação constante no sentido horário pelo ângulo especificado, ignorando a direção do caminho. |
auto <angle> | Segue a direção do caminho e adiciona o ângulo especificado por cima. |
initial | Faz a propriedade usar seu valor padrão (auto). |
inherit | Herda a propriedade de seu elemento pai (sem efeito aqui, pois não é herdada). |