CSS offset-rotate Eigenschaft
Die CSS-Eigenschaft offset-rotate legt den Winkel eines Elements entlang des offset-path fest. Werte und Beispiele.
Die CSS-Eigenschaft offset-rotate legt die Ausrichtung (Drehung) eines Elements fest, während es sich entlang seines Bewegungspfads bewegt. Wenn ein Element mit einem offset-path positioniert und mit offset-distance verschoben wird, bestimmt offset-rotate, ob das Element sich automatisch in die Bewegungsrichtung dreht, in die entgegengesetzte Richtung zeigt oder einen festen Winkel beibehält.
Diese Eigenschaft verwenden Sie, wenn ein Pfeil, ein Auto, ein Flugzeug oder eine beliebige gerichtete Form der Kurve „folgen" soll, anstatt starr entlangzugleiten. Standardmäßig behält ein Element seine ursprüngliche Ausrichtung bei, egal wie sehr sich der Pfad biegt; offset-rotate: auto lässt es sich drehen, sodass seine Vorderkante stets entlang des Pfads ausgerichtet ist.
In frühen Entwürfen der Spezifikation hieß diese Eigenschaft motion-rotation, dann offset-rotation und schließlich offset-rotate. Die älteren Namen tauchen möglicherweise noch in älteren Artikeln auf, aber nur offset-rotate ist aktuell.
Kurzübersicht
| Anfangswert | auto |
|---|---|
| Gilt für | Transformierbare Elemente |
| Vererbt | Nein |
| Animierbar | Ja |
| Berechneter Wert | Das Schlüsselwort, ein Winkel oder beides |
| Version | Motion Path Module Level 1 |
| DOM-Syntax | object.style.offsetRotate = "auto 90deg"; |
Syntax
/* keywords */
offset-rotate: auto;
offset-rotate: reverse;
/* a fixed angle */
offset-rotate: 90deg;
offset-rotate: 0.5turn;
/* a keyword plus an angle offset */
offset-rotate: auto 45deg;
offset-rotate: reverse 90deg;auto— das Element dreht sich entsprechend der Pfadrichtung an seiner aktuellen Position (0deg bedeutet „entlang des Pfads zeigend").reverse— wieauto, jedoch um zusätzliche 180 Grad gedreht, sodass das Element rückwärts entlang des Pfads zeigt.<angle>— eine feste Drehung, die die Pfadrichtung ignoriert. Das Element wird um diesen konstanten Winkel im Uhrzeigersinn gedreht.auto <angle>— kombiniert beides: der Pfadrichtung folgen und den Winkel zusätzlich addieren. Dies ist die nützlichste Form, wenn die Form in eine nicht standardmäßige Richtung „zeigt" (zum Beispiel: Ein nach oben gezeichneter Pfeil benötigtauto 90deg, um entlang eines nach rechts verlaufenden Pfades zu zeigen).
Ein häufiger Fallstrick: offset-rotate hat nur dann eine Wirkung, wenn das Element tatsächlich einen offset-path besitzt. Allein bewirkt es nichts — es gibt keine Pfadrichtung, an der es ausgerichtet werden könnte.
Beispiel: Der Pfadrichtung folgen
<!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>Im obigen Beispiel können Sie offset-rotate: reverse; durch offset-rotate: auto; ersetzen, damit die Form nach vorne statt nach hinten zeigt, oder einen festen Wert wie offset-rotate: 45deg; verwenden, um eine konstante Neigung beizubehalten, die die Kurve völlig ignoriert.
Beispiel: Fester Winkel vs. auto
Ein fester <angle> behält die gleiche Ausrichtung entlang des gesamten Pfads bei, während auto und reverse an jedem Punkt neu ausrichten. Vergleichen Sie die beiden Quadrate unten:
<!DOCTYPE html>
<html>
<head>
<title>offset-rotate: auto vs. fixed angle</title>
<style>
.track {
position: relative;
height: 160px;
}
.mover {
width: 40px;
height: 40px;
position: absolute;
offset-path: path("M20,80 Q120,0 220,80 T420,80");
animation: move 4s linear infinite;
}
/* turns to follow the curve */
.auto {
background: #1c87c9;
offset-rotate: auto;
}
/* always tilted 45deg, ignores the curve */
.fixed {
background: #8ebf42;
offset-rotate: 45deg;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>auto (blue) follows the curve; 45deg (green) stays fixed</h2>
<div class="track">
<div class="mover auto"></div>
<div class="mover fixed"></div>
</div>
</body>
</html>Browser-Unterstützung und Barrierefreiheit
Motion-Path-Eigenschaften werden in aktuellen Versionen von Chrome, Edge, Safari und Firefox unterstützt. Da der Effekt rein dekorative Bewegung ist, sollten Sie Nutzer, die reduzierte Bewegung bevorzugen, durch eine Media Query berücksichtigen:
@media (prefers-reduced-motion: reduce) {
.mover {
animation: none;
}
}Für eine feinere Kontrolle über den Pfad selbst, siehe offset-path und offset-distance; die Kurzform offset ermöglicht es, diese zusammen mit offset-rotate in einer einzigen Deklaration zu setzen. Wenn Sie nur eine statische Drehung benötigen, die nicht mit einem Pfad zusammenhängt, verwenden Sie stattdessen transform.
Werte
| Wert | Beschreibung |
|---|---|
auto | Das Element wird so gedreht, dass es der Richtung des offset-path an seiner aktuellen Position entspricht. |
reverse | Das Element wird entsprechend der Pfadrichtung plus 180 Grad gedreht (rückwärts zeigend). |
<angle> | Eine konstante Drehung im Uhrzeigersinn um den angegebenen Winkel, ohne Berücksichtigung der Pfadrichtung. |
auto <angle> | Folgt der Pfadrichtung und addiert den angegebenen Winkel zusätzlich. |
initial | Setzt die Eigenschaft auf ihren Standardwert (auto). |
inherit | Erbt die Eigenschaft vom übergeordneten Element (hier ohne Wirkung, da sie nicht vererbt wird). |