Transformacje 2D i 3D: obracanie, skalowanie, przesuwanie

Transformacje w CSS to potężne narzędzie, które pozwala na tworzenie zaawansowanych efektów wizualnych bez konieczności używania JavaScriptu czy grafik wektorowych. Dzięki nim możesz przekształcać elementy w przestrzeni dwuwymiarowej i trójwymiarowej, dodając głębi i realizmu do swoich projektów.

Dlaczego transformacje są ważne?

Interaktywność: Pozwalają na tworzenie efektownych interakcji z użytkownikiem.
Estetyka: Dodają profesjonalizmu i nowoczesności stronie.
Animacje 3D: Umożliwiają tworzenie animacji w przestrzeni trójwymiarowej.
Bez konieczności JavaScriptu: Proste przekształcenia można tworzyć za pomocą samego CSS, co upraszcza kod i poprawia wydajność.

Podstawy transformacji w CSS

Właściwość `transform`

Główna właściwość używana do przekształcania elementów. Pozwala na zastosowanie różnych funkcji transformacji.

Składnia:

selector {
  transform: funkcja1(parametry) funkcja2(parametry) ...;
}

Przykład:

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

Pochodzenie transformacji (`transform-origin`)

Określa punkt odniesienia dla transformacji (domyślnie środek elementu).

Składnia:

selector {
  transform-origin: x y;
}

Przykład:

.element {
  transform-origin: top left;
}

Transformacje 2D

1. Przesuwanie (`translate`)

Przesuwa element wzdłuż osi X i Y.

Funkcje:

translate(tx, ty)
translateX(tx)
translateY(ty)

Przykłady:

/* Przesunięcie o 50px w prawo i 20px w dół */
.element {
  transform: translate(50px, 20px);
}

/* Przesunięcie o 100px w lewo */
.element {
  transform: translateX(-100px);
}

2. Skalowanie (`scale`)

Zmienia rozmiar elementu w osi X i Y.

Funkcje:

scale(sx, sy)
scaleX(sx)
scaleY(sy)

Przykłady:

/* Powiększenie o 150% w obu osiach */
.element {
  transform: scale(1.5);
}

/* Rozciągnięcie w poziomie, bez zmiany wysokości */
.element {
  transform: scaleX(2);
}

3. Obracanie (`rotate`)

Obraca element o podany kąt (w stopniach) wokół punktu odniesienia.

Funkcja:

rotate(angle)

Przykład:

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

4. Pochylenie (`skew`)

Pochyla element w osi X i Y.

Funkcje:

skew(ax, ay)
skewX(ax)
skewY(ay)

Przykłady:

/* Pochylenie o 20 stopni w osi X */
.element {
  transform: skewX(20deg);
}

/* Pochylenie o 10 stopni w osi X i 15 stopni w osi Y */
.element {
  transform: skew(10deg, 15deg);
}

5. Matryca transformacji (`matrix`)

Pozwala na zastosowanie przekształcenia za pomocą macierzy 2D.

Funkcja:

matrix(a, b, c, d, e, f)

Przykład:

.element {
  transform: matrix(1, 0.5, -0.5, 1, 0, 0);
}

Uwaga: Używanie matrix() jest zaawansowane i rzadko potrzebne w codziennym użyciu.

Transformacje 3D

Włączenie perspektywy

Aby korzystać z transformacji 3D, musimy zdefiniować perspektywę.

Metody:

Użycie właściwości perspective na elemencie rodzica.
Użycie funkcji perspective() bezpośrednio w transform.

Przykład 1:

.container {
  perspective: 1000px;
}

.element {
  transform: rotateY(45deg);
}

Przykład 2:

.element {
  transform: perspective(1000px) rotateY(45deg);
}

1. Obracanie w przestrzeni 3D (`rotate3d`, `rotateX`, `rotateY`, `rotateZ`)

Funkcje:

rotateX(angle)
rotateY(angle)
rotateZ(angle)
rotate3d(x, y, z, angle)

Przykłady:

/* Obrót wokół osi X */
.element {
  transform: rotateX(45deg);
}

/* Obrót wokół osi Y */
.element {
  transform: rotateY(30deg);
}

/* Obrót wokół osi Z (to samo co rotate w 2D) */
.element {
  transform: rotateZ(60deg);
}

/* Obrót w przestrzeni 3D */
.element {
  transform: rotate3d(1, 1, 0, 45deg);
}

2. Skalowanie w przestrzeni 3D (`scale3d`, `scaleZ`)

Funkcje:

scaleZ(sz)
scale3d(sx, sy, sz)

Przykłady:

/* Skalowanie wzdłuż osi Z */
.element {
  transform: scaleZ(1.5);
}

/* Skalowanie we wszystkich osiach */
.element {
  transform: scale3d(1.2, 1.2, 1.2);
}

3. Przesuwanie w przestrzeni 3D (`translate3d`, `translateZ`)

Funkcje:

translateZ(tz)
translate3d(tx, ty, tz)

Przykłady:

/* Przesunięcie o 100px w głąb ekranu */
.element {
  transform: translateZ(100px);
}

/* Przesunięcie we wszystkich osiach */
.element {
  transform: translate3d(50px, 0, -50px);
}

4. Matryca transformacji 3D (`matrix3d`)

Funkcja:

matrix3d(a1, a2, ..., a16)

Przykład:

.element {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1);
}

Uwaga: Podobnie jak w przypadku matrix(), używanie matrix3d() jest zaawansowane.

Przekształcenie pochodzenia (`transform-origin`)

Określa punkt odniesienia dla transformacji (np. punkt, wokół którego element się obraca).

Składnia:

transform-origin: x y z;

Przykłady:

/* Obrót wokół lewego górnego rogu */
.element {
  transform-origin: top left;
}

/* Obrót wokół punktu o współrzędnych (50%, 50%, 100px) */
.element {
  transform-origin: 50% 50% 100px;
}

Przykłady praktyczne

1. Animacja obracającej się karty

HTML:

<div class="scene">
  <div class="card">
    <div class="front">Przód</div>
    <div class="back">Tył</div>
  </div>
</div>

CSS:

.scene {
  width: 200px;
  height: 300px;
  perspective: 1000px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.card:hover {
  transform: rotateY(180deg);
}

.card div {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  background-color: #2980b9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back {
  background-color: #27ae60;
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

Wyjaśnienie:

Używamy perspective na rodzicu .scene, aby nadać głębię.
Karta .card ma włączony transform-style: preserve-3d, co pozwala na zachowanie trójwymiarowości jej dzieci.
Przy najechaniu na .card, obraca się ona o 180 stopni wokół osi Y.
Elementy .front i .back są umieszczone w tej samej pozycji, ale .back jest obrócona o 180 stopni, dzięki czemu po obrocie karty jest widoczna.

2. Przesuwający się i skalujący obrazek

HTML:

<div class="image-container">
  <img src="obrazek.jpg" alt="Obrazek">
</div>

CSS:

.image-container {
  overflow: hidden;
  width: 300px;
  height: 200px;
}

.image-container img {
  transition: transform 0.5s;
}

.image-container:hover img {
  transform: scale(1.2) translateX(-10%);
}

Wyjaśnienie:

Po najechaniu na kontener obrazka, obrazek powiększa się i przesuwa lekko w lewo, tworząc efekt "zoomu".

3. Animowany sześcian 3D

HTML:

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face right">Right</div>
  <div class="face left">Left</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

CSS:

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
}

.front {
  background-color: rgba(255, 0, 0, 0.7);
  transform: translateZ(100px);
}

.back {
  background-color: rgba(0, 255, 0, 0.7);
  transform: rotateY(180deg) translateZ(100px);
}

.right {
  background-color: rgba(0, 0, 255, 0.7);
  transform: rotateY(90deg) translateZ(100px);
}

.left {
  background-color: rgba(255, 255, 0, 0.7);
  transform: rotateY(-90deg) translateZ(100px);
}

.top {
  background-color: rgba(0, 255, 255, 0.7);
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  background-color: rgba(255, 0, 255, 0.7);
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes spin {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

Wyjaśnienie:

Tworzymy sześcian z sześciu elementów .face, każdy reprezentuje jedną ścianę.
Ustawiamy transform-style: preserve-3d, aby zachować trójwymiarowość.
Przekształcamy każdą ścianę, aby ustawić ją w odpowiedniej pozycji w przestrzeni 3D.
Animacja spin obraca sześcian wokół osi X i Y.

Dobre praktyki

Optymalizuj wydajność: Złożone transformacje 3D mogą obciążać przeglądarkę, zwłaszcza na urządzeniach mobilnych.
Testuj na różnych przeglądarkach: Upewnij się, że transformacje działają poprawnie we wszystkich docelowych przeglądarkach.
Używaj will-change: Informuje przeglądarkę o nadchodzących zmianach, co może poprawić wydajność.

Przykład:

.element {
  will-change: transform;
}

Unikaj nadmiernej ilości animacji 3D: Mogą rozpraszać użytkownika i wpływać negatywnie na doświadczenie użytkownika.
Zwróć uwagę na dostępność: Upewnij się, że animacje nie powodują dyskomfortu u użytkowników wrażliwych na ruch.

Częste błędy i jak ich unikać

Brak perspektywy: Transformacje 3D wymagają zdefiniowania perspektywy, inaczej efekty 3D nie będą widoczne.

Rozwiązanie: Użyj perspective na elemencie rodzica lub funkcji perspective().

Zapominanie o transform-style: preserve-3d: Aby dzieci elementu zachowały trójwymiarowość, musisz ustawić tę właściwość.
Nadmierne używanie złożonych transformacji: Może to prowadzić do problemów z wydajnością.
Niepoprawne wartości funkcji transformacji: Upewnij się, że używasz poprawnych jednostek i wartości.
Brak backface-visibility: Przy obrocie elementów może być widoczna ich tylna strona.

Rozwiązanie: Ustaw backface-visibility: hidden; na elementach.

Podsumowanie

W tej lekcji nauczyliśmy się:

Czym są transformacje 2D i 3D oraz jak je stosować w CSS.
Jak korzystać z funkcji transformacji, takich jak translate, rotate, scale, skew.
Jak wprowadzać elementy w przestrzeń trójwymiarową, używając rotateX, rotateY, translateZ i innych.
Znaczenia perspektywy i jak ją ustawić za pomocą perspective.
Praktycznych zastosowań transformacji w tworzeniu interaktywnych i efektownych elementów na stronie.
Dobrych praktyk w stosowaniu transformacji oraz jak unikać typowych błędów.

Transformacje 2D i 3D w CSS otwierają przed nami szerokie możliwości tworzenia nowoczesnych i angażujących interfejsów. Dzięki nim możemy dodać głębi i ruchu do naszych projektów, zwiększając ich atrakcyjność.

Zadania do samodzielnego wykonania

Stwórz obracające się logo:
- Zaprojektuj logo lub użyj obrazka.
- Dodaj animację, która obraca logo wokół osi Y w nieskończoność.
- Użyj transform-origin i perspective, aby dostosować efekt.
Zaprojektuj menu z efektem przesuwania:
- Utwórz menu nawigacyjne, w którym elementy przesuwają się lekko w górę i powiększają po najechaniu myszką.
- Użyj translateY i scale w połączeniu z transition.
Eksperymentuj z efektem parallax:
- Stwórz stronę z kilkoma sekcjami.
- Dodaj tło, które przesuwa się w innej prędkości niż reszta strony podczas przewijania (wymaga to również JavaScriptu lub wykorzystania właściwości CSS background-attachment: fixed;).

Ciekawostka

Czy wiesz, że za pomocą transformacji CSS można tworzyć gry i interaktywne aplikacje bez użycia canvas czy WebGL? Niektórzy twórcy stron internetowych wykorzystują zaawansowane transformacje i animacje CSS do tworzenia trójwymiarowych środowisk i efektów, pokazując, jak potężnym narzędziem może być CSS w kreatywnych rękach.

Testy przypięte do lekcji
Aby uzyskać dostęp do testów i ćwiczeń interaktywnych - Zaloguj się

Aby widzieć ocenę lekcji - Zaloguj się

Następna lekcja: Zmienne CSS i właściwości niestandardowe →

← Poprzednia lekcja: Czym jest strona internetowa i jak działa?

Transformacje 2D i 3D: obracanie, skalowanie, przesuwanie

Dlaczego transformacje są ważne?

Podstawy transformacji w CSS

Właściwość transform

Pochodzenie transformacji (transform-origin)

Transformacje 2D

1. Przesuwanie (translate)

2. Skalowanie (scale)

3. Obracanie (rotate)

4. Pochylenie (skew)

5. Matryca transformacji (matrix)

Transformacje 3D

Włączenie perspektywy

1. Obracanie w przestrzeni 3D (rotate3d, rotateX, rotateY, rotateZ)

2. Skalowanie w przestrzeni 3D (scale3d, scaleZ)

3. Przesuwanie w przestrzeni 3D (translate3d, translateZ)

4. Matryca transformacji 3D (matrix3d)

Przekształcenie pochodzenia (transform-origin)

Przykłady praktyczne

1. Animacja obracającej się karty

2. Przesuwający się i skalujący obrazek

3. Animowany sześcian 3D

Dobre praktyki

Częste błędy i jak ich unikać

Podsumowanie

Zadania do samodzielnego wykonania

Ciekawostka

Właściwość `transform`

Pochodzenie transformacji (`transform-origin`)

1. Przesuwanie (`translate`)

2. Skalowanie (`scale`)

3. Obracanie (`rotate`)

4. Pochylenie (`skew`)

5. Matryca transformacji (`matrix`)

1. Obracanie w przestrzeni 3D (`rotate3d`, `rotateX`, `rotateY`, `rotateZ`)

2. Skalowanie w przestrzeni 3D (`scale3d`, `scaleZ`)

3. Przesuwanie w przestrzeni 3D (`translate3d`, `translateZ`)

4. Matryca transformacji 3D (`matrix3d`)

Przekształcenie pochodzenia (`transform-origin`)