CSS-Eigenschaft offset-rotate

Die Eigenschaft offset-rotate gibt die Ausrichtung eines Elements in Abhängigkeit von offset-distance entlang offset-path an.

Diese Eigenschaft hat folgende Werte: auto, reverse, <angle>.

Anfangswert auto
Gilt für Transformierbare Elemente
Geerbt Nein
Animierbar Ja
Version Motion Path Module Level 1
DOM Syntax object.style.offsetRotate = "auto 90deg";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft offset-rotate</h2>
    <div class="mover"></div>
  </body>
</html>

Werte

Wert Beschreibung
auto Das Objekt wird um den Winkel der Richtung des Offsetpfades gedreht.
reverse Das Objekt wird um den Winkel der Richtung des Offsetpfades plus 180 Grad gedreht.
<angle> Die Box hat eine konstante Transformation der Drehung im Uhrzeigersinn, die um den angegebenen Drehwinkel auf sie angewendet wird.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
56.0+ ?

Übe dein Wissen

Welche Angaben können für die CSS-Eigenschaft 'offset-rotate' verwendet werden?
Finden Sie das nützlich?