Propriété CSS offset-rotate

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 initiale	auto
S'applique à	Éléments transformables.
Héritée	Non.
Animable	Oui.
Version	Motion Path Module Level 1
Syntaxe DOM	object.style.offsetRotate = "auto 90deg";

Syntaxe

Syntaxe CSS de offset-rotate

css

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

Exemple de la propriété offset-rotate :

Exemple de code CSS pour offset-rotate

html

<!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>

Try it Yourself »

Valeurs

Valeur	Description
auto	L'objet est tourné selon l'angle de la direction du chemin de décalage.

reverse	L'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é.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Practice

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

Elle contrôle l'orientation de l'élément.Elle définit la couleur de l'élément.Elle positionne l'élément par rapport à sa position normale.Elle crée des transformations 3D pour un élément.Elle définit le point de rotation par rapport à la propriété position.

Propriété CSS offset-rotate ​

Syntaxe ​

Exemple de la propriété offset-rotate : ​

Valeurs ​

Practice ​

Propriété CSS offset-rotate

Syntaxe

Exemple de la propriété offset-rotate :

Valeurs

Practice