Kurs HTML

Stosowanie wielu transformacji

Właściwość transform pozwala na zastosowanie **więcej niż jednej funkcji transformacji** do tego samego elementu. Funkcje te podaje się po prostu jedna po drugiej, oddzielone spacjami.

.element {
  transform: translateX(50px) rotate(45deg) scale(1.2);
}
Kopiuj

W powyższym przykładzie element zostanie najpierw przesunięty w prawo o 50px, następnie obrócony o 45 stopni (wokół punktu transformacji w nowej, przesuniętej pozycji), a na końcu przeskalowany do 120% (również wokół punktu transformacji w już obróconej i przesuniętej pozycji).

Kolejność ma znaczenie!

Kluczową rzeczą do zapamiętania przy łączeniu transformacji jest to, że **kolejność, w jakiej podajemy funkcje, ma fundamentalne znaczenie** dla końcowego rezultatu. Transformacje są stosowane sekwencyjnie, od lewej do prawej.

Każda kolejna transformacja jest stosowana do elementu, który został już zmodyfikowany przez poprzednie transformacje w łańcuchu. Zmiana kolejności funkcji zazwyczaj prowadzi do zupełnie innego efektu wizualnego.

Przykład: Obrót i Przesunięcie

Rozważmy dwa przypadki:

/* Przypadek 1: Najpierw przesuń, potem obróć */
.element-A {
  transform: translateX(100px) rotate(45deg);
}

/* Przypadek 2: Najpierw obróć, potem przesuń */
.element-B {
  transform: rotate(45deg) translateX(100px);
}
Kopiuj

Wynik będzie różny:

• Element A: Najpierw zostanie przesunięty o 100px w prawo wzdłuż pierwotnej osi X. Następnie zostanie obrócony o 45 stopni wokół swojego środka (który jest teraz w nowej, przesuniętej pozycji).
• Element B: Najpierw zostanie obrócony o 45 stopni wokół swojego środka w pierwotnej pozycji. Następnie zostanie przesunięty o 100px wzdłuż **nowej, obróconej osi X** (czyli przesunie się ukośnie w górę i w prawo względem pierwotnego układu współrzędnych).

Wizualnie, element B znajdzie się w zupełnie innym miejscu niż element A.

Przykład: Skalowanie i Przesunięcie

/* Przypadek 1: Najpierw przesuń, potem skaluj */
.element-C {
  transform: translateX(100px) scale(2);
}

/* Przypadek 2: Najpierw skaluj, potem przesuń */
.element-D {
  transform: scale(2) translateX(100px);
}
Kopiuj

• Element C: Przesunięty o 100px w prawo, a następnie powiększony dwukrotnie (względem środka w nowej pozycji). Efektywne przesunięcie środka wyniesie 100px.
• Element D: Powiększony dwukrotnie (względem środka w pierwotnej pozycji), a następnie przesunięty o 100px wzdłuż osi X (w nowym, powiększonym układzie). Efektywne przesunięcie środka wyniesie 200px (100px * 2) względem pierwotnej pozycji.

Jak to działa pod spodem? Macierze transformacji

Przeglądarka wewnętrznie reprezentuje każdą funkcję transformacji jako **macierz matematyczną**. Kiedy łączymy transformacje, przeglądarka mnoży odpowiadające im macierze. Ponieważ mnożenie macierzy generalnie **nie jest przemienne** (A * B ≠ B * A), kolejność operacji (kolejność funkcji w CSS) ma bezpośredni wpływ na wynikową macierz transformacji, a tym samym na końcowy wygląd elementu.

Nie musisz znać szczegółów matematyki macierzy, aby używać transformacji, ale świadomość, że kolejność ma znaczenie ze względu na sposób ich obliczania, jest ważna.

Praktyczne wskazówki

• Eksperymentuj: Najlepszym sposobem na zrozumienie wpływu kolejności jest eksperymentowanie w narzędziach deweloperskich przeglądarki. Zmieniaj kolejność funkcji i obserwuj, jak zmienia się element.
• Myśl sekwencyjnie: Zastanów się, jaki efekt chcesz osiągnąć krok po kroku. Czy element ma się najpierw obrócić, a potem przesunąć wzdłuż nowej osi, czy odwrotnie?
• Używaj transform-origin świadomie: Pamiętaj, że punkt transformacji również wpływa na wynik, zwłaszcza przy obrotach i skalowaniu.
• Prostota jest kluczem: Jeśli to możliwe, staraj się nie tworzyć nadmiernie skomplikowanych łańcuchów transformacji, ponieważ mogą być trudne do debugowania i zrozumienia.