Transformacje 2D

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• wyjaśnić, czym różni się transformacja od przesuwania layoutu,
• używać translate() do bezpiecznego przesunięcia elementu,
• stosować scale() bez psucia czytelności i klikalności,
• obracać elementy przez rotate(),
• ustawiać punkt transformacji przez transform-origin,
• rozumieć, dlaczego kolejność funkcji w transform ma znaczenie.

Kontekst praktyczny

Transformacje pojawiają się w kartach po najechaniu, ikonach rozwijania, badge'ach, tooltipach, dropdownach, elementach drag-and-drop, przyciskach i stanach aktywnych. Dobrze użyte pomagają pokazać reakcję interfejsu bez przebudowywania layoutu.

Czym jest transform

Właściwość transform nakłada na element przekształcenie wizualne. Element nadal zajmuje swoje pierwotne miejsce w układzie, ale przeglądarka rysuje go inaczej: przesuniętego, powiększonego, obróconego albo połączonego z kilkoma efektami.

Kopiuj.card {
  transform: translateY(-.25rem);
}

Transformacja nie zastępuje Grid, Flexboxa ani pozycjonowania. Jeżeli chcesz zmienić prawdziwy układ strony, użyj narzędzi layoutu. Jeżeli chcesz tylko przesunąć narysowanie elementu, użyj transform.

Translate

translate() przesuwa element w osi X i Y. W praktyce często używa się skrótów translateX() i translateY(), na przykład do delikatnego podniesienia karty albo przesunięcia ikony.

Kopiuj.card--lifted {
  transform: translateY(-.35rem);
}

.badge--offset {
  transform: translate(.5rem, -.5rem);
}

Przesunięty element może wizualnie nałożyć się na sąsiadów, bo jego miejsce w układzie pozostaje bez zmian. Dlatego transformacje trzeba testować w realnym układzie, nie tylko w izolowanym przykładzie.

Scale

scale() zmienia rozmiar rysowania elementu. Warto używać go oszczędnie, szczególnie na elementach z tekstem, bo zbyt duża skala może rozmywać litery albo powodować nachodzenie na inne komponenty.

Kopiuj.button:active {
  transform: scale(.98);
}

.featured-card {
  transform: scale(1.03);
}

Drobna skala, na przykład .98 albo 1.03, często wystarczy. Skala 1.3 w zwykłej karcie zwykle jest już problemem layoutowym i wizualnym.

Rotate

rotate() obraca element wokół punktu transformacji. Kąty podajesz najczęściej w stopniach przez deg. Małe obroty dobrze sprawdzają się w ikonach i detalach, ale tekst obrócony pod dużym kątem szybko traci czytelność.

Kopiuj.chevron {
  transform: rotate(90deg);
}

.note-card {
  transform: rotate(-2deg);
}

Obrót działa wizualnie, nie semantycznie. Jeżeli ikona zmienia znaczenie po obrocie, zadbaj też o poprawny tekst, etykietę albo stan komponentu.

Transform origin

transform-origin określa punkt, względem którego wykonuje się transformacja. Domyślnie jest to środek elementu, ale możesz ustawić go na przykład na lewy górny róg albo środek dolnej krawędzi.

Kopiuj.menu-panel {
  transform-origin: top right;
  transform: scale(.96);
}

.indicator {
  transform-origin: center bottom;
  transform: rotate(6deg);
}

Ten sam obrót wygląda inaczej, gdy punkt transformacji jest w środku, w rogu albo na krawędzi. To szczególnie ważne przy dropdownach, tooltipach i ikonach.

Kolejność funkcji

W jednej właściwości możesz połączyć kilka funkcji. Kolejność ma znaczenie, bo przeglądarka stosuje transformacje jako sekwencję operacji. translate() rotate() nie musi wyglądać tak samo jak rotate() translate().

Kopiuj.card {
  transform: translateY(-.4rem) rotate(2deg) scale(1.02);
}

Dla początkujących najbezpieczniejsza kolejność w komponentach UI to zwykle: małe przesunięcie, mały obrót, mała skala. Ważniejsze jest przewidywalne zachowanie niż efektowność.

Demo transformacji 2D

Poniższe demo pokazuje cztery warianty transformacji oraz różnicę między punktem transformacji ustawionym w środku i w rogu elementu.

Najczęstsze błędy początkujących

• Używanie transform do naprawiania layoutu zamiast Flexboxa, Grida albo spacingu.
• Zbyt duże wartości scale(), które powodują nachodzenie elementów.
• Obracanie tekstu w sposób pogarszający czytelność.
• Zapominanie, że transformowany element nadal zajmuje stare miejsce w flow.
• Łączenie wielu funkcji bez sprawdzania, czy kolejność daje oczekiwany efekt.
• Ustawianie transform-origin przypadkowo, szczególnie w dropdownach i ikonach.

Mini zadanie

Zbuduj mały komponent karty produktu z trzema transformacjami.

• Dodaj wariant karty z transform: translateY(-.35rem).
• Dodaj przycisk, który w stanie aktywnym używa scale(.98).
• Dodaj ikonę strzałki obracaną przez rotate(90deg).
• Sprawdź, czy transformacje nie powodują poziomego overflow na szerokości 390px.
• Zapisz kolejność funkcji transformacji i opisz, dlaczego jej nie zmieniasz przypadkowo.

Checklista

• Rozumiem, że transform nie przebudowuje normalnego flow.
• Potrafię użyć translate(), scale() i rotate().
• Wiem, kiedy transformacja może wizualnie nałożyć elementy.
• Potrafię ustawić transform-origin.
• Rozumiem, że kolejność funkcji transformacji ma znaczenie.
• Używam małych, kontrolowanych wartości w komponentach UI.

Podsumowanie lekcji

Transformacje 2D pozwalają zmieniać sposób rysowania elementu bez przesuwania innych elementów w układzie. Najważniejsze narzędzia to translate(), scale(), rotate(), transform-origin oraz świadoma kolejność funkcji w jednej deklaracji.

Kolejny krok roadmapy to przejścia CSS: transition.