Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
offset-rotate
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
Dieoffset-rotateCSS Eigenschaft definiert die Orientierung/Richtung des Elements, während es entlang desoffset-path positioniert wird.
Probieren Sie es aus
offset-rotate: auto;offset-rotate: 90deg;offset-rotate: auto 90deg;offset-rotate: reverse;<section> <div></div> <button type="button">Play</button></section>#example-element { width: 24px; height: 24px; background: #2bc4a2; offset-path: path("M-70,-40 C-70,70 70,70 70,-40"); animation: distance 8000ms infinite linear; animation-play-state: paused; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);}#example-element.running { animation-play-state: running;}#playback { position: absolute; top: 0; left: 0; font-size: 1em;}@keyframes distance { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; }}/* Provides a reference image of what path the element is following */#default-example { position: relative; background-position: calc(50% - 12px) calc(50% + 14px); background-repeat: no-repeat; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 -45 150 140" width="150" height="140"><path d="M-70,-40 C-70,70 70,70 70,-40" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');}const example = document.getElementById("example-element");const button = document.getElementById("playback");button.addEventListener("click", () => { if (example.classList.contains("running")) { example.classList.remove("running"); button.textContent = "Play"; } else { example.classList.add("running"); button.textContent = "Pause"; }});Hinweis:Frühere Versionen der Spezifikation nannten diese Eigenschaftmotion-rotation.
Syntax
/* Follow the path direction, with optional additional angle */offset-rotate: auto;offset-rotate: auto 45deg;/* Follow the path direction but facing the opposite direction of `auto` */offset-rotate: reverse;/* Keep a constant rotation regardless the position on the path */offset-rotate: 90deg;offset-rotate: 0.5turn;/* Global values */offset-rotate: inherit;offset-rotate: initial;offset-rotate: revert;offset-rotate: revert-layer;offset-rotate: unset;autoDas Element wird um den Winkel der Richtung des
offset-path, relativ zur positiven x-Achse, gedreht. Dies ist der Standardwert.<angle>Auf das Element wird eine konstante, im Uhrzeigersinn verlaufende Drehtransformation mit dem angegebenen Drehwinkel angewendet.
auto <angle>Wenn
autovon einem<angle>gefolgt wird, wird der berechnete Wert des Winkels zum berechneten Wert vonautohinzugefügt.reverseDas Element wird ähnlich wie
autogedreht, es sieht jedoch in die entgegengesetzte Richtung. Dies entspricht dem Angeben eines Wertes vonauto 180deg.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | transformierbare Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | als <angle>, <basic-shape> oder <path()> |
Formale Syntax
offset-rotate =
[auto|reverse]||
<angle>
Beispiele
Orientierung eines Elements entlang seines Offset-Pfads festlegen
HTML
<div></div><div></div><div></div>CSS
div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path("M20,20 C20,50 180,-10 180,20");}div:nth-child(1) { offset-rotate: auto;}div:nth-child(2) { offset-rotate: auto 90deg;}div:nth-child(3) { offset-rotate: 30deg;}@keyframes move { 100% { offset-distance: 100%; }}Ergebnis
Spezifikationen
| Specification |
|---|
| Motion Path Module Level 1 # offset-rotate-property |