CSS Transform - przekształcenia 2D i 3D

Witaj ponownie w Dolinie Królów! Podobnie jak starożytni Egipcjanie potrafili przekształcać prosty kamień w majestatyczne rzeźby bogów, tak w CSS możemy transformować elementy - przesuwać, obracać, skalować i pochylać je w przestrzeni 2D i 3D. Transform to klucz do tworzenia nowoczesnych, dynamicznych interfejsów!

Czym jest Transform?

Transform pozwala na geometryczne przekształcenia elementu bez wpływu na layout innych elementów. Element zostaje przekształcony wizualnie, ale jego oryginalna przestrzeń w dokumencie pozostaje niezmieniona.

Kluczowa zaleta: Transform jest GPU-accelerated, co oznacza niezwykle wysoką wydajność!

1.element {
2  /* Element przesuwa się, ale nie wpływa na inne elementy */
3  transform: translateX(100px);
4}

Analogia egipska: To jak cień piramidy - piramida pozostaje na swoim miejscu, ale jej cień porusza się w zależności od słońca.

Transform 2D - podstawowe funkcje

1. Translate - przesuwanie

1/* Przesuń w poziomie */
2.element {
3  transform: translateX(100px);  /* W prawo o 100px */
4  transform: translateX(-50px);  /* W lewo o 50px */
5}
6
7/* Przesuń w pionie */
8.element {
9  transform: translateY(50px);   /* W dół o 50px */
10  transform: translateY(-30px);  /* W górę o 30px */
11}
12
13/* Przesuń w obu kierunkach */
14.element {
15  transform: translate(100px, 50px);  /* X, Y */
16}
17
18/* Procenty relatywne do rozmiaru elementu */
19.element {
20  transform: translate(50%, -100%);
21  /* 50% swojej szerokości w prawo */
22  /* 100% swojej wysokości w górę */
23}

Praktyczne użycie - centrowanie:

1.center {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);  /* Perfect center! */
6}

2. Scale - skalowanie

1/* Powiększ 2x */
2.element {
3  transform: scale(2);  /* 200% rozmiaru */
4}
5
6/* Pomniejsz do połowy */
7.element {
8  transform: scale(0.5);  /* 50% rozmiaru */
9}
10
11/* Różne skale w X i Y */
12.element {
13  transform: scale(2, 0.5);  /* 2x szerokość, 0.5x wysokość */
14}
15
16/* Tylko X lub tylko Y */
17.element {
18  transform: scaleX(1.5);  /* Rozciągnij w poziomie */
19  transform: scaleY(0.8);  /* Ściśnij w pionie */
20}
21
22/* Odbicie lustrzane */
23.element {
24  transform: scaleX(-1);  /* Flip horizontal */
25  transform: scaleY(-1);  /* Flip vertical */
26  transform: scale(-1, -1);  /* Flip both */
27}

Praktyczny przykład - zoom on hover:

1.card {
2  transition: transform 0.3s ease;
3}
4
5.card:hover {
6  transform: scale(1.05);  /* Subtelny zoom */
7}

3. Rotate - obracanie

1/* Obrót w stopniach */
2.element {
3  transform: rotate(45deg);   /* 45° w prawo */
4  transform: rotate(-90deg);  /* 90° w lewo */
5  transform: rotate(180deg);  /* Obrót o 180° */
6}
7
8/* Obrót w radianach */
9.element {
10  transform: rotate(1.57rad);  /* ~90° */
11}
12
13/* Obrót w turns (pełne obroty) */
14.element {
15  transform: rotate(0.5turn);  /* Pół obrotu (180°) */
16  transform: rotate(2turn);    /* 2 pełne obroty (720°) */
17}

Praktyczny przykład - loading spinner:

1.spinner {
2  width: 40px;
3  height: 40px;
4  border: 4px solid #f3f3f3;
5  border-top: 4px solid goldenrod;
6  border-radius: 50%;
7  animation: spin 1s linear infinite;
8}
9
10@keyframes spin {
11  from {
12    transform: rotate(0deg);
13  }
14  to {
15    transform: rotate(360deg);
16  }
17}

4. Skew - pochylenie

1/* Pochyl w poziomie */
2.element {
3  transform: skewX(15deg);  /* Pochyl w prawo */
4  transform: skewX(-15deg); /* Pochyl w lewo */
5}
6
7/* Pochyl w pionie */
8.element {
9  transform: skewY(10deg);
10}
11
12/* Pochyl w obu kierunkach */
13.element {
14  transform: skew(15deg, 10deg);  /* X, Y */
15}

Praktyczny przykład - parallelogram button:

1.skew-button {
2  transform: skewX(-10deg);
3  background: goldenrod;
4  padding: 12px 30px;
5  color: white;
6  border: none;
7  font-weight: bold;
8}
9
10.skew-button span {
11  display: inline-block;
12  transform: skewX(10deg);  /* Odskew tekstu */
13}

Łączenie transformacji

Możesz łączyć wiele transformacji w jednej deklaracji:

1.element {
2  /* Kolejność ma znaczenie! */
3  transform: translate(100px, 50px) rotate(45deg) scale(1.5);
4
5  /* To nie to samo co: */
6  transform: rotate(45deg) translate(100px, 50px) scale(1.5);
7}

Ważne: Transformacje są wykonywane od prawej do lewej (od końca do początku)!

Praktyczny przykład - kompleksowa animacja:

1.card {
2  transition: transform 0.5s ease;
3}
4
5.card:hover {
6  transform: translateY(-10px)  /* Najpierw w górę */
7            rotate(2deg)        /* Potem lekki obrót */
8            scale(1.05);        /* Na końcu zoom */
9}

Transform-origin - punkt odniesienia

Transform-origin określa punkt, wokół którego następują transformacje:

1/* Default */
2.element {
3  transform-origin: 50% 50%;  /* Środek (center center) */
4}
5
6/* Różne punkty */
7.element {
8  transform-origin: top left;     /* Lewy górny róg */
9  transform-origin: bottom right; /* Prawy dolny róg */
10  transform-origin: center;       /* Środek */
11  transform-origin: 0 0;          /* Lewy górny (px) */
12  transform-origin: 100% 0;       /* Prawy górny */
13}

Przykład - obrót wokół różnych punktów:

1.door-left {
2  transform-origin: left center;
3  transition: transform 0.5s;
4}
5
6.door-left:hover {
7  transform: rotateY(90deg);  /* Obrót wokół lewej krawędzi */
8}
9
10.door-right {
11  transform-origin: right center;
12  transition: transform 0.5s;
13}
14
15.door-right:hover {
16  transform: rotateY(-90deg);  /* Obrót wokół prawej krawędzi */
17}

Transform 3D

3D transformacje dodają głębię i perspektywę:

Perspective - perspektywa

Perspektywa musi być ustawiona na rodzicu elementów 3D:

1.container {
2  perspective: 1000px;  /* Im większa wartość, tym mniejsza perspektywa */
3}
4
5.child {
6  transform: rotateY(45deg);  /* Teraz widać efekt 3D */
7}

Lub na samym elemencie:

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

3D Rotations

1/* Obrót wokół osi X (przód-tył) */
2.element {
3  transform: rotateX(45deg);
4}
5
6/* Obrót wokół osi Y (lewo-prawo) */
7.element {
8  transform: rotateY(45deg);
9}
10
11/* Obrót wokół osi Z (normalny obrót 2D) */
12.element {
13  transform: rotateZ(45deg);  /* To samo co rotate(45deg) */
14}
15
16/* Obrót wokół własnej osi 3D */
17.element {
18  transform: rotate3d(1, 1, 0, 45deg);  /* x, y, z, angle */
19}

3D Translations

1/* Przesuń w głąb/przed */
2.element {
3  transform: translateZ(100px);   /* Przód */
4  transform: translateZ(-100px);  /* Tył */
5}
6
7/* 3D translate */
8.element {
9  transform: translate3d(100px, 50px, 200px);  /* X, Y, Z */
10}

Transform-style i Backface-visibility

1.container {
2  /* Zachowaj 3D dla dzieci */
3  transform-style: preserve-3d;
4
5  /* Lub spłaszcz do 2D */
6  transform-style: flat;
7}
8
9.card {
10  /* Ukryj tylną stronę elementu */
11  backface-visibility: hidden;
12
13  /* Lub pokaż */
14  backface-visibility: visible;
15}

Praktyczne przykłady 3D

1. Flip card

1<div class="flip-card">
2  <div class="flip-card-inner">
3    <div class="flip-card-front">
4      <h3>Przód</h3>
5    </div>
6    <div class="flip-card-back">
7      <h3>Tył</h3>
8    </div>
9  </div>
10</div>

1.flip-card {
2  width: 300px;
3  height: 400px;
4  perspective: 1000px;
5}
6
7.flip-card-inner {
8  width: 100%;
9  height: 100%;
10  transition: transform 0.6s;
11  transform-style: preserve-3d;
12  position: relative;
13}
14
15.flip-card:hover .flip-card-inner {
16  transform: rotateY(180deg);
17}
18
19.flip-card-front,
20.flip-card-back {
21  position: absolute;
22  width: 100%;
23  height: 100%;
24  backface-visibility: hidden;
25  display: flex;
26  align-items: center;
27  justify-content: center;
28  border-radius: 10px;
29}
30
31.flip-card-front {
32  background: #3498db;
33  color: white;
34}
35
36.flip-card-back {
37  background: goldenrod;
38  color: white;
39  transform: rotateY(180deg);
40}

2. 3D Cube

1<div class="cube-container">
2  <div class="cube">
3    <div class="cube-face front">Front</div>
4    <div class="cube-face back">Back</div>
5    <div class="cube-face right">Right</div>
6    <div class="cube-face left">Left</div>
7    <div class="cube-face top">Top</div>
8    <div class="cube-face bottom">Bottom</div>
9  </div>
10</div>

1.cube-container {
2  width: 200px;
3  height: 200px;
4  perspective: 800px;
5}
6
7.cube {
8  width: 100%;
9  height: 100%;
10  position: relative;
11  transform-style: preserve-3d;
12  transition: transform 1s;
13  animation: rotate-cube 10s infinite linear;
14}
15
16.cube-face {
17  position: absolute;
18  width: 200px;
19  height: 200px;
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  font-size: 24px;
24  font-weight: bold;
25  color: white;
26  opacity: 0.9;
27}
28
29.front  { background: #3498db; transform: translateZ(100px); }
30.back   { background: #e74c3c; transform: translateZ(-100px) rotateY(180deg); }
31.right  { background: #2ecc71; transform: rotateY(90deg) translateZ(100px); }
32.left   { background: #f39c12; transform: rotateY(-90deg) translateZ(100px); }
33.top    { background: #9b59b6; transform: rotateX(90deg) translateZ(100px); }
34.bottom { background: #1abc9c; transform: rotateX(-90deg) translateZ(100px); }
35
36@keyframes rotate-cube {
37  from {
38    transform: rotateX(0deg) rotateY(0deg);
39  }
40  to {
41    transform: rotateX(360deg) rotateY(360deg);
42  }
43}

3. 3D Button push effect

1.button-3d {
2  background: goldenrod;
3  color: white;
4  padding: 15px 30px;
5  border: none;
6  font-size: 18px;
7  font-weight: bold;
8  cursor: pointer;
9  transform: translateZ(0);
10  transition: transform 0.1s;
11  box-shadow: 0 6px 0 #d4920a;
12}
13
14.button-3d:hover {
15  transform: translateY(-2px);
16  box-shadow: 0 8px 0 #d4920a;
17}
18
19.button-3d:active {
20  transform: translateY(4px);
21  box-shadow: 0 2px 0 #d4920a;
22}

Performance Tips

GPU-accelerated (SZYBKIE):

• transform (wszystkie funkcje)
• opacity

CPU-bound (WOLNE):

• left, top, right, bottom
• width, height
• margin, padding

Best Practices:

1/* Wolne - powoduje reflow */
2.element:hover {
3  width: 300px;
4  left: 100px;
5}
6
7/* Szybkie - GPU-accelerated */
8.element:hover {
9  transform: translateX(100px) scaleX(1.5);
10}
11
12/* Force GPU acceleration */
13.element {
14  transform: translateZ(0);  /* Trick dla GPU */
15  /* lub */
16  will-change: transform;  /* Poinformuj przeglądarkę */
17}

Podsumowanie

Transform 2D:

• translate - przesuwanie (X, Y)
• scale - skalowanie
• rotate - obracanie
• skew - pochylenie

Transform 3D:

• perspective - głębia sceny
• rotateX, rotateY, rotateZ - obroty 3D
• translateZ - przesuwanie w głąb/przed
• transform-style: preserve-3d - zachowanie 3D
• backface-visibility - ukrywanie tylnej strony

Kluczowe zasady:

1. Transform NIE wpływa na layout
2. GPU-accelerated = bardzo szybki
3. Kolejność transformacji ma znaczenie
4. Transform-origin kontroluje punkt odniesienia
5. Łącz z transition dla płynnych animacji

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(180deg, #1a0a2e, #3d2914);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: white;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #f0c040;
25}
26
27.tomb {
28  display: flex;
29  justify-content: center;
30  perspective: 500px;
31}
32
33.sarcophagus {
34  position: relative;
35  width: 200px;
36  height: 300px;
37}
38
39.base {
40  width: 200px;
41  height: 280px;
42  background: linear-gradient(180deg, #d4af37, #b8941e);
43  border-radius: 10px 10px 5px 5px;
44  display: flex;
45  align-items: center;
46  justify-content: center;
47  font-size: 40px;
48  border: 3px solid #8d6e2e;
49  position: absolute;
50  bottom: 0;
51}
52
53.lid {
54  width: 210px;
55  height: 50px;
56  background: linear-gradient(180deg, #c9a84c, #a88932);
57  border-radius: 8px 8px 0 0;
58  display: flex;
59  align-items: center;
60  justify-content: center;
61  font-size: 18px;
62  font-weight: bold;
63  border: 3px solid #8d6e2e;
64  position: absolute;
65  top: 0;
66  left: -5px;
67  transform-origin: top center;
68  /* Dodaj animation shorthand tutaj */
69  /* animation: openLid 3s ease-in-out 1s 1 normal forwards; */
70}
71
72/* Zdefiniuj @keyframes openLid */
73/* @keyframes openLid { */
74/*   0% { transform: rotateX(0deg); } */
75/*   100% { transform: rotateX(-120deg); } */
76/* } */
77
78.hint {
79  margin-top: 30px;
80  color: #aaa;
81  font-style: italic;
82}

Pamiętaj: Transform to jak magiczne zaklęcia egipskich kapłanów - potrafią przekształcać rzeczywistość bez zmiany jej istoty!