Ikona strzałki w przycisku jest skierowana w złą stronę, a zmiana jej grafiki byłaby przesadą. Zwykle wystarczy obrót elementu w CSS, choć wybór między właściwością rotate a funkcją rotate() zależy od tego, czy animujesz sam obrót, czy łączysz go z innymi transformacjami.
Obrót w CSS najłatwiej dobrać do liczby transformacji
rotate: 90deg;ustawia obrót niezależnie od innych właściwości transformacji.transform: rotate(90deg);przydaje się, gdy obrót jest częścią łańcucha transformacji.transform-originzmienia punkt, wokół którego obraca się element.- Obrót zmienia wygląd, ale nie przestawia elementu w układzie strony.
- Transformacja może utworzyć nowy kontekst układania, co wpływa na nakładanie elementów.
rotate obraca element bez dopisywania funkcji do transform
Gdy obracasz tylko jeden element, możesz użyć osobnej właściwości CSS. Najprostszy zapis wygląda tak:
.strzalka {
rotate: 90deg;
}Wartość kąta podajesz w stopniach, radianach lub obrotach, na przykład 45deg, 0.25turn albo 1.57rad. Ujemny kąt obraca w przeciwną stronę. W przypadku typowego interfejsu, takiego jak strzałka rozwijanego menu, rotate jest czytelne i łatwe do zmiany.
Ta właściwość jest częścią zestawu indywidualnych transformacji CSS, obok translate i scale. Według dokumentacji MDN dla właściwości rotate kąt bez wskazania osi oznacza obrót wokół osi Z, czyli klasyczny obrót w płaszczyźnie ekranu.
Wybierz transform: rotate(), gdy obrót jest częścią większej zmiany
Masz już w regule transform przesunięcie albo skalowanie? Wtedy dopisz obrót do tego samego łańcucha, zamiast deklarować transform ponownie:
.strzalka {
transform: translateY(2px) rotate(90deg);
}Każda kolejna deklaracja transform zastępuje poprzednią. Jeśli więc osobna reguła zawiera transform: translateY(2px), późniejsze transform: rotate(90deg) skasuje przesunięcie, chyba że połączysz obie funkcje w jednej wartości.
Właściwości translate, rotate i scale mogą natomiast współistnieć z transform. Przeglądarka stosuje je w określonej kolejności: najpierw przesunięcie, potem obrót, skalowanie, a na końcu właściwość transform. Opisuje to dokumentacja właściwości transform. Uważam, że przy kilku niezależnych efektach taki podział zwykle ułatwia późniejszą korektę stylów.
transform-origin decyduje, czy element obraca się wokół środka
Jeśli obracany element zatacza łuk zamiast obracać się na miejscu, sprawdź jego punkt obrotu. Domyślnie znajduje się on w środku elementu, ale możesz ustawić go na przykład przy lewej krawędzi:
.etykieta {
transform: rotate(-90deg);
transform-origin: left top;
}To przydatne przy pionowych etykietach lub dekoracyjnych detalach przyczepionych do narożnika. Dla strzałki w przycisku środek zazwyczaj działa lepiej; zmiana punktu obrotu ma sens dopiero wtedy, gdy projekt wymaga obrotu wokół konkretnej krawędzi.
Sam obrót nie zmienia miejsca elementu w przepływie dokumentu. Po obróceniu prostokąt może wystawać poza pierwotny obszar, nachodzić na sąsiednią treść albo zostać przycięty przez kontener z overflow: hidden. Jeśli layout ma się dopasować do nowego kształtu, trzeba osobno zaplanować wymiary i pozycję.
Obrót może zmienić warstwy, choć nie zmienia układu strony
Element wygląda na obrócony i wysunięty nad sąsiada, a mimo to menu albo dymek zachowują się inaczej niż przed zmianą. Powód bywa niewidoczny: zastosowanie transformacji może utworzyć nowy kontekst układania, a także blok zawierający dla elementów pozycjonowanych wewnątrz.
To obala częsty skrót myślowy, że obrót jest wyłącznie kosmetyczną zmianą obrazu. Specyfikacja CSS Transforms Module Level 2 opisuje właściwości transformacji, a dokumentacja MDN wskazuje, że wartość inna niż none tworzy kontekst układania. W praktyce panel position: fixed umieszczony wewnątrz przekształconego rodzica może zachowywać się tak, jakby był pozycjonowany względem tego rodzica, a nie okna przeglądarki.
| Sytuacja | Prawdopodobna przyczyna | Co zrobić |
|---|---|---|
| Obrócony element zachodzi na sąsiedni | Obrót zmienił wizualny obrys, ale nie przepływ dokumentu | Skoryguj pozycję lub wymiary kontenera i sprawdź overflow |
Menu nie wychodzi nad inne elementy mimo wysokiego z-index |
Element znajduje się w innym kontekście układania | Sprawdź transformacje na rodzicu oraz hierarchię warstw |
Element position: fixed przesuwa się razem z rodzicem |
Przekształcony przodek może stać się jego blokiem zawierającym | Przenieś element poza ten kontener albo usuń transformację z przodka |
| Obrót animuje się wokół niewłaściwego miejsca | Punkt obrotu nie pasuje do zamierzonego efektu | Dostosuj transform-origin |
Do obracania tekstu pionowego lepiej użyć właściwego kierunku pisma
Jeżeli celem jest pionowy napis, mechaniczne obracanie całego bloku o 90 stopni nie zawsze będzie najlepszym rozwiązaniem. W etykiecie bocznej panelu możesz potrzebować writing-mode, który zmienia kierunek układania tekstu i pozwala zachować naturalne łamanie wierszy.
Obrót przez rotate lub transform sprawdza się przy ikonach, znaczkach i elementach dekoracyjnych. Przy tekście wybór zależy od tego, czy litery mają pozostać ustawione pionowo, czy cały napis ma być obrócony jako jeden obiekt. Te efekty wyglądają podobnie na pierwszy rzut oka, ale prowadzą do innego układu treści.
Najpierw sprawdź punkt obrotu, potem poprawiaj odstępy
Gdy strzałka lub ikona po obrocie wydaje się przesunięta, nie zaczynaj od dodawania marginesów. Najpierw sprawdź transform-origin, a potem zobacz, czy obrócony kształt nie wychodzi poza kontener albo nie wpada pod inną warstwę. Taka kolejność zwykle szybciej wskazuje źródło problemu.
Do pojedynczego obrotu wybierz rotate; gdy obrót ma współpracować z przesunięciem lub skalowaniem zapisanym w transform, połącz funkcje w jednej wartości albo świadomie rozdziel właściwości. Dzięki temu mała zmiana ikony nie zamieni się w niespodziewaną poprawkę całego układu.
