CSS offset-rotate-Eigenschaft

Die CSS-Eigenschaft offset-rotate bestimmt die Ausrichtung eines Elements in Abhängigkeit von seiner offset-distance entlang des offset-path.

In frühen Versionen der Spezifikation hieß diese Eigenschaft motion-rotation, später wurde sie zu offset-rotation geändert und heißt nun offset-rotate.

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

Initial Value	auto
Applies to	Transformierbare Elemente.
Inherited	Nein.
Animatable	Ja.
Version	Motion Path Module Level 1
DOM Syntax	object.style.offsetRotate = "auto 90deg";

Syntax

CSS-Syntax für offset-rotate

css

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

Beispiel für die offset-rotate-Eigenschaft:

CSS-Codebeispiel für 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 »

Werte

Value	Description
auto	Das Objekt wird um den Winkel der Richtung des Offset-Pfads gedreht.

reverse	Das Objekt wird um den Winkel der Richtung des Offset-Pfads plus 180 Grad gedreht.
`<angle>`	Auf das Element wird eine konstante Drehung im Uhrzeigersinn um den angegebenen Winkel angewendet.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was kann mit der CSS-Eigenschaft offset-rotate erreicht werden?

Sie steuert die Ausrichtung des Elements.Sie legt die Farbe des Elements fest.Sie positioniert das Element relativ zu seiner Normalposition.Sie erstellt 3D-Transformationen für ein Element.Sie legt den Drehpunkt relativ zur position-Eigenschaft fest.

CSS offset-rotate-Eigenschaft ​

Syntax ​

Beispiel für die offset-rotate-Eigenschaft: ​

Werte ​

Praxis ​

CSS offset-rotate-Eigenschaft

Syntax

Beispiel für die offset-rotate-Eigenschaft:

Werte

Praxis