Kurs HTML

Czym są transformacje CSS?

Transformacje CSS pozwalają na **modyfikowanie wizualnej prezentacji elementów HTML** bez zmiany ich rzeczywistego miejsca w przepływie dokumentu (layout). Oznacza to, że możemy przesuwać, skalować, obracać czy pochylać elementy, a otaczające je treści nie zostaną przesunięte ani nie zmienią swojego położenia.

Transformacje są potężnym narzędziem do tworzenia efektów wizualnych, animacji i interaktywnych interfejsów użytkownika. Działają one w przestrzeni 2D lub 3D.

Podstawową właściwością do stosowania transformacji jest transform.

Właściwość transform

Właściwość transform przyjmuje jako wartość jedną lub więcej **funkcji transformacji**. Funkcje te określają rodzaj modyfikacji, jaka ma zostać zastosowana do elementu.

Składnia:

transform: funkcja1(wartość) funkcja2(wartość) ... ;
transform: none; /* Brak transformacji (wartość domyślna) */Kopiuj

Możemy zastosować jedną transformację lub połączyć kilka, oddzielając je spacjami. Kolejność funkcji ma znaczenie!

Podstawowe funkcje transformacji 2D

W kolejnych lekcjach omówimy szczegółowo najważniejsze funkcje, ale oto krótki przegląd najczęściej używanych transformacji 2D:

• translate(tx, [ty]): Przesuwa element w poziomie (o tx) i opcjonalnie w pionie (o ty). Istnieją też funkcje translateX(tx) i translateY(ty).
• scale(sx, [sy]): Skaluje (powiększa lub pomniejsza) element w poziomie (o sx) i opcjonalnie w pionie (o sy). Wartość 1 oznacza brak skalowania. Istnieją też funkcje scaleX(sx) i scaleY(sy).
• rotate(kąt): Obraca element wokół jego punktu centralnego o podany kąt (np. w stopniach - deg).
• skew(kątX, [kątY]): Pochyla element w poziomie (o kątX) i opcjonalnie w pionie (o kątY). Istnieją też funkcje skewX(kątX) i skewY(kątY).

Przykład użycia jednej funkcji:

.element {
  transform: rotate(45deg); /* Obróć element o 45 stopni */
}
Kopiuj

Przykład łączenia funkcji:

.element {
  /* Najpierw obróć, potem przesuń */
  transform: rotate(45deg) translate(50px, 20px);
}
Kopiuj

Transformacje a Layout

Jak wspomniano, kluczową cechą transformacji jest to, że **nie wpływają one na otaczający layout**. Element jest rysowany w nowym miejscu lub z nowym kształtem, ale przestrzeń, którą pierwotnie zajmował, pozostaje nienaruszona. Inne elementy nie "widzą" transformacji i nie przesuwają się, aby zrobić miejsce.

To odróżnia transformacje od modyfikacji layoutu za pomocą np. position: relative z top/left (które również nie wpływa na inne elementy) czy zmiany marginesów (które wpływają na otoczenie).

Dzięki temu transformacje są idealne do animacji i efektów wizualnych, ponieważ ich stosowanie jest wydajne dla przeglądarki (często wykorzystują akcelerację sprzętową GPU) i nie powoduje kosztownych przeliczeń całego layoutu strony.

Właściwość transform-origin

Domyślnie transformacje takie jak obrót (rotate) czy skalowanie (scale) odbywają się wokół **środka elementu** (punkt 50% 50%). Właściwość transform-origin pozwala zmienić ten punkt odniesienia.

Omówimy ją szczegółowo w dedykowanej lekcji.

.element {
  transform-origin: top left; /* Ustaw punkt transformacji na lewy górny róg */
  transform: rotate(30deg);
}
Kopiuj