CSS-Eigenschaft offset-rotate

❮ Vorige Nächste ❯

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>

Versuch es selber!

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.