W3docs
fr
Se connecter

Propriété CSS offset-rotate

Use the offset-rotate CSS property for specifying the angle of the box along the offset-path. Read about property values and try examples.

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

Dans les premières versions de la spécification, cette propriété s'appelait motion-rotation, puis elle est devenue offset-rotation, et elle est maintenant appelée offset-rotate.

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

Valeur initialeauto
S'applique àÉléments transformables.
HéritéeNon.
AnimableOui.
VersionMotion Path Module Level 1
Syntaxe DOMobject.style.offsetRotate = "auto 90deg";

Syntaxe

Syntaxe CSS de offset-rotate

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

Exemple de la propriété offset-rotate :

Exemple de code CSS pour offset-rotate

<!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>
Essayez vous-même »

Valeurs

ValeurDescription
autoL'objet est tourné selon l'angle de la direction du chemin de décalage.
reverseL'objet est tourné selon l'angle de la direction du chemin de décalage plus 180 degrés.
<angle>La boîte subit une transformation de rotation constante dans le sens des aiguilles d'une montre, appliquée selon l'angle de rotation spécifié.
initialDéfinit la valeur par défaut de la propriété.
inheritHérite la propriété de son élément parent.

Practice

Pratique

Que permet de faire la propriété CSS offset-rotate ?