Właściwość CSSTransformacje
rotate
Obraca element o podany kąt, niezależnie od właściwości transform.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako kąt
- Dotyczy
- elementy transformowalne
- JavaScript
element.style.rotate = "45deg"
Przykład
#CSS
.chevron {
transition: rotate 0.2s;
}
details[open] .chevron {
rotate: 180deg;
}HTML przykładu
<details style="padding: 8px 12px; border: 1px solid #333; border-radius: 10px;">
<summary style="cursor: pointer; list-style: none; display: flex; justify-content: space-between;">Jak działa rotate? <span class="chevron" style="transition: rotate .2s;">▾</span></summary>
<p style="margin: 8px 0 0">Kliknij, a strzałka obróci się o 180 stopni.</p>
</details>
<style>details[open] .chevron { rotate: 180deg; }</style>Podgląd
Definicja i zastosowanie
#Właściwość rotate obraca element wokół punktu transform-origin. Kąt podajesz w stopniach (deg), obrotach (turn) albo radianach (rad). Wartości dodatnie obracają zgodnie z ruchem wskazówek zegara.
Podając oś przed kątem, na przykład rotate: y 60deg, uzyskasz obrót w 3D wokół wybranej osi. Efekt głębi pojawi się, gdy rodzic ma ustawioną perspective.
Właściwość działa niezależnie od transform, więc możesz animować sam obrót, a przesunięcie i skalę ustawiać osobno.
Składnia
#Składnia
rotate: none | <kąt> | <oś> <kąt>;Wartości
#Wartości w praktyce
#none
Brak obrotu.
.demo { rotate: none; }45deg
Obrót o 45 stopni.
.demo { rotate: 45deg; }-0.1turn
Obrót o dziesiątą część pełnego obrotu, w lewo.
.demo { rotate: -0.1turn; }x 60deg
Obrót wokół osi poziomej. Bez perspektywy element po prostu się spłaszcza.
.demo { rotate: x 60deg; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Strzałki rozwijanych sekcji obracaj przez
rotate, a nie podmianę ikony. Przejście wygląda wtedy płynnie. - Jednostka
turnjest czytelna przy animacjach:1turnto pełny obrót.
Powiązane hasła
#- transformPrzesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
- transform-originUstawia punkt, wokół którego element się obraca i względem którego się skaluje.
- translatePrzesuwa element w poziomie, pionie lub w głąb, niezależnie od właściwości transform.
- scalePowiększa lub pomniejsza element, niezależnie od właściwości transform.
Widzisz błąd albo brakuje przykładu? Napisz do nas.