CSS właściwość offset-rotate

Definicja i zastosowanie

offset-rotate Atrybut ten służy do ustawienia kąta obrotu elementów animowanych poruszających się po ścieżce.

Przykład

Przykład 1

Ustaw kąt obrotu trzech elementów <img> poruszających się po ścieżce:

#fish1 {
  offset-rotate: auto;
}
#fish2 {
  offset-rotate: auto 90deg;
}
#fish3 {
  offset-rotate: 90deg;
}

Spróbuj sam

Przykład 2

Użyj jednostki turn zamiast deg do określenia kąta obrotu elementu:

div {
  offset-rotate: 0.25turn;
}

Spróbuj sam

Gramatyka CSS

offset-rotate: auto|angle|initial|inherit;

Wartość atrybutu

Wartość Opis
auto Element jest skierowany w stronę ruchu po ścieżce. Domyślna wartość.
angle Określ kąt obrotu elementu w stałym kącie.
auto angle Równocześnie określ auto i angleKąt jest dodawany do domyślnego kąta rotacji, w kierunku zgodnym z zegarem.
reverse Element obraca się w przeciwnym kierunku do domyślnej rotacji.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Inherkuje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: auto
Inherencja: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.offsetRotate="45deg"

Wsparcie przeglądarki

Numer w tabeli oznacza wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
56 79 72 16 43

Strony związane

Kurs:Ścieżki SVG

Kurs:Animacje CSS

Referencje:CSS właściwość offset

Referencje:CSS właściwość offset-anchor

Referencje:CSS właściwość offset-distance

Referencje:CSS właściwość offset-path

Referencje:CSS właściwość offset-position