Propriété CSS offset-rotate

La propriété offset-rotate spécifie l'orientation d'un élément en fonction de offset-distance le long de offset-path.

Cette propriété a les valeurs suivantes: auto, reverse, <angle>.

Valeur initiale	auto
Appliquée à	Élémemts transformables.
Héritée	Non.
Animable	Oui.
Version	Motion Path Module Level 1
Syntaxe DOM	object.style.offsetRotate = "auto 90deg";

Syntaxe

offset-rotate: auto | reverse | <angle>;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété offset-rotate</h2>
    <div class="mover"></div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	L'objet est tourné de l'angle de la direction du chemin de décalage.
reverse	L'objet est tourné de l'angle de la direction du chemin de décalage 180 degrés plus.
<angle>	La boîte a une transformation de rotation constante dans le sens des aiguilles d'une montre qui lui est appliquée par l'angle de rotation spécifié.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.