Tworzenie efektów 3D

Tworzenie efektów 3D

CSS pozwala nie tylko na stylizowanie elementów w dwóch wymiarach, ale również na wprowadzenie efektów przestrzennych – tzw. efektów 3D.
Dzięki nim możesz tworzyć animacje i układy, które wyglądają, jakby „wychodziły z ekranu”, przechylały się, obracały lub unosiły w przestrzeni.

Nie potrzebujesz do tego żadnych bibliotek ani JavaScriptu – wystarczy kilka właściwości CSS, takich jak transform, perspective czy backface-visibility.

Transformacje 3D – rotateX, rotateY, rotateZ

Podstawą efektów 3D są obroty w przestrzeni. CSS pozwala obracać elementy w trzech osiach:

• X – obrót w pionie (góra/dół)
• Y – obrót w poziomie (lewo/prawo)
• Z – obrót „na płasko” (jak wskazówki zegara)

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

Aby efekt wyglądał realistycznie, trzeba dodać także perspektywę.

Ustawienie perspektywy

perspective to właściwość, która dodaje iluzję głębi. Ustawia się ją na elemencie nadrzędnym (rodzicu):

.scene {
  perspective: 800px;
}

.box {
  transform: rotateY(30deg);
}

Im mniejsza wartość, tym silniejszy efekt 3D. Zbyt niska wartość może jednak wyglądać nienaturalnie.

Efekt obracanej karty

Jednym z najczęstszych zastosowań 3D w CSS jest „flip card” – element, który obraca się, pokazując drugą stronę. To świetny efekt np. w quizach, kartach ofert czy portfolio.

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

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

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

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-size: 20px;
  color: white;
  border-radius: 12px;
}

.front {
  background: #4caf50;
}

.back {
  background: #2196f3;
  transform: rotateY(180deg);
}
</style>

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

Efekt działania: karta obraca się po najechaniu kursorem, odsłaniając drugą stronę.
👉 Sprawdź w JSFiddle

Efekt uniesienia – proste 3D bez rotacji

Nawet bez pełnego obrotu możesz uzyskać efekt „unoszenia się” elementu – wystarczy translateY i cień:

.card {
  transform: translateZ(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

To bardzo prosty i elegancki efekt „głębi” – często stosowany w nowoczesnych interfejsach.

Dobre praktyki

• Efekty 3D używaj z umiarem – zbyt wiele może przytłoczyć użytkownika.
• Dodaj backface-visibility: hidden, aby uniknąć migotania lub niepotrzebnego wyświetlania drugiej strony.
• Upewnij się, że elementy są czytelne i nie zniekształcone na urządzeniach mobilnych.
• Testuj w różnych przeglądarkach – choć wsparcie dla 3D jest dziś dobre, drobne różnice mogą się pojawić.

Podsumowanie

• transform pozwala obracać i przesuwać elementy w przestrzeni 3D.
• perspective nadaje głębi i realizmu.
• Efekty 3D świetnie sprawdzają się w kartach, quizach, animacjach i UI.
• To narzędzie, które – użyte świadomie – może znacząco podnieść jakość projektu.

W kolejnym kroku sprawdzimy Twoją wiedzę – czas na quiz podsumowujący ten punkt.