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>

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.

Support de Navigateurs

56.0+ ?


Trouvez-vous cela utile?

Articles Associées