Propiedad CSS offset-rotate
Usa la propiedad CSS offset-rotate para especificar el ángulo del elemento a lo largo del offset-path. Valores y ejemplos.
La propiedad CSS offset-rotate establece la orientación (rotación) de un elemento a medida que se desplaza por su trayectoria de movimiento. Cuando un elemento se posiciona con un offset-path y se mueve con offset-distance, offset-rotate decide si el elemento gira automáticamente para seguir la dirección de desplazamiento, apunta en sentido contrario o mantiene un ángulo fijo.
Esta es la propiedad a la que se recurre cuando se quiere que una flecha, un coche, un avión o cualquier forma direccional "siga la curva" en lugar de deslizarse rígidamente. Por defecto, un elemento mantiene su orientación original sin importar cómo se curve la trayectoria; offset-rotate: auto hace que pivote de modo que su borde frontal siempre apunte a lo largo del camino.
En los primeros borradores de la especificación esta propiedad se llamaba motion-rotation, luego offset-rotation y finalmente offset-rotate. Es posible que aún aparezcan los nombres anteriores en artículos antiguos, pero solo offset-rotate es el nombre vigente.
Referencia rápida
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos transformables |
| Heredada | No |
| Animable | Sí |
| Valor calculado | La palabra clave, un ángulo o ambos |
| Versión | Motion Path Module Level 1 |
| Sintaxis DOM | object.style.offsetRotate = "auto 90deg"; |
Sintaxis
/* 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— el elemento rota para coincidir con la dirección de la trayectoria en su posición actual (0deg significa "apuntando a lo largo del camino").reverse— igual queauto, pero con una rotación adicional de 180deg, de modo que el elemento apunta hacia atrás a lo largo de la trayectoria.<angle>— una rotación fija que ignora la dirección de la trayectoria. El elemento rota este ángulo constante en sentido horario.auto <angle>— combina ambos: sigue la dirección de la trayectoria y luego añade el ángulo encima. Esta es la forma más útil cuando tu figura "apunta" en una dirección no estándar (por ejemplo, una flecha dibujada apuntando hacia arriba necesitaauto 90degpara seguir una trayectoria hacia la derecha).
Un error frecuente: offset-rotate solo tiene efecto cuando el elemento tiene un offset-path. Por sí sola no hace nada, ya que no hay ninguna dirección de trayectoria con la que alinearse.
Ejemplo: siguiendo la dirección de la trayectoria
<!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>En el ejemplo anterior, cambia offset-rotate: reverse; por offset-rotate: auto; para ver la figura apuntando hacia adelante en lugar de hacia atrás, o usa un valor fijo como offset-rotate: 45deg; para mantener una inclinación constante que ignore la curva por completo.
Ejemplo: ángulo fijo frente a auto
Un <angle> fijo mantiene la misma orientación a lo largo de toda la trayectoria, mientras que auto y reverse reorientan el elemento en cada punto. Compara los dos cuadrados a continuación:
<!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>Compatibilidad con navegadores y accesibilidad
Las propiedades de trayectoria de movimiento son compatibles con las versiones actuales de Chrome, Edge, Safari y Firefox. Como el efecto es puramente una animación decorativa, respeta a los usuarios que prefieren movimiento reducido envolviendo las animaciones en una media query:
@media (prefers-reduced-motion: reduce) {
.mover {
animation: none;
}
}Para un control más detallado sobre la propia trayectoria, consulta offset-path y offset-distance; la propiedad abreviada offset permite definirlas junto con offset-rotate en una sola declaración. Si solo necesitas una rotación estática no relacionada con una trayectoria, usa transform en su lugar.
Valores
| Valor | Descripción |
|---|---|
auto | El elemento rota para coincidir con la dirección del offset-path en su posición actual. |
reverse | El elemento rota para coincidir con la dirección de la trayectoria más 180 grados (apuntando hacia atrás). |
<angle> | Una rotación constante en sentido horario según el ángulo dado, ignorando la dirección de la trayectoria. |
auto <angle> | Sigue la dirección de la trayectoria y añade el ángulo dado encima. |
initial | Hace que la propiedad use su valor predeterminado (auto). |
inherit | Hereda la propiedad de su elemento padre (sin efecto aquí, ya que no se hereda). |