Sintassi

Significato dei valori principali:

• auto: Ruota automaticamente l’elemento in base alla tangente del percorso nel punto corrente.

• auto <angle>: Ruota automaticamente come auto, poi aggiunge un angolo fisso (deg, rad, ecc.).

• <angle>: Ruota l’elemento di un angolo fisso indipendentemente dal percorso.

Esempio proprietà: offset-rotate

Codice Esempio: offset-rotate

CODE: CSS

1. .offset-rotate-box {

2.   offset-path: path("M20,200 C100,0 300,300 380,100");

3.   offset-distance: 0%;

4.   offset-rotate: auto;

5.   animation: rotateAlongPath 6s linear infinite;

6. }

8. @keyframes rotateAlongPath {

9.   from {

10.     offset-distance: 0%;

11.   }

12.   to {

13.     offset-distance: 100%;

14.   }

15. }

Contenuto Esempio: offset-rotate

  
  <style>
    .offset-rotate-box {
      offset-path: path("M20,200 C100,0 300,300 380,100");
      offset-distance: 0%;
      offset-rotate: auto;
      animation: rotateAlongPath 6s linear infinite;
    }

    @keyframes rotateAlongPath {
      from { offset-distance: 0%; }
      to { offset-distance: 100%; }
    }
  </style>

  <div class="offset-rotate-box"></div>
  

✅ Note aggiuntive:

• offset-rotate: auto; è particolarmente utile per far "seguire" l’orientamento del percorso all’elemento.
• Puoi combinare auto con un angolo per aggiungere una rotazione extra (es. auto 45deg).
• Supporto browser: ottimo su Chrome, Edge, Safari; Firefox ancora in sperimentazione.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser