Tworzenie interaktywnej kostki do gry w CSS

Tworzenie interaktywnej kostki do gry w CSS to świetny sposób, żeby pobawić się transformacjami 3D, animacjami i odrobiną JavaScriptu. Jeśli kiedykolwiek zastanawiałeś się, jak zrobić coś efektownego, co jednocześnie nie wymaga bibliotek czy frameworków – to jest właśnie to. Kostka 3D wygląda nowocześnie, działa płynnie i daje ogromne pole do eksperymentów.

W tym artykule pokażę Ci, jak stworzyć taką kostkę od zera. Nie będziemy korzystać z gotowców, nie będziemy kopiować kodu z internetu – wszystko zrobimy własnymi rękami. A przy okazji nauczysz się kilku sztuczek, które przydadzą Ci się w innych projektach.

Dlaczego warto stworzyć kostkę 3D w CSS?

Możesz zapytać: „Po co mi kostka 3D?”. I to jest dobre pytanie. Odpowiedź jest prosta: bo to świetne ćwiczenie. Transformacje 3D w CSS są potężne, ale rzadko używane. A szkoda – bo pozwalają tworzyć naprawdę efektowne elementy interfejsu.

Tworząc kostkę:

• uczysz się pracy z transform: rotateX, rotateY, translateZ,
• poznajesz perspektywę i jej wpływ na elementy,
• ćwiczysz animacje i przejścia,
• możesz dodać interaktywność za pomocą JavaScriptu,
• a finalnie masz coś, co wygląda jak mini-gra.

To projekt, który możesz wrzucić do portfolio, pokazać znajomym albo wykorzystać jako element strony – np. jako loader, widget, dekorację albo nawet jako część gry przeglądarkowej.

Jak działa kostka 3D w CSS?

Żeby stworzyć kostkę, potrzebujesz sześciu ścian – każda to osobny element HTML. Następnie ustawiasz je w przestrzeni 3D tak, aby tworzyły sześcian. CSS pozwala przesuwać elementy w osi Z, obracać je i ustawiać pod odpowiednim kątem.

Najważniejsze pojęcia:

• perspective – określa, jak głęboka jest scena 3D,
• transform-style: preserve-3d – pozwala zachować trójwymiarowość elementów potomnych,
• translateZ – przesuwa element w głąb ekranu lub na zewnątrz,
• rotateX / rotateY – obraca element wokół osi.

Kiedy już ustawisz ściany, możesz dodać animację, która obraca kostkę. A jeśli chcesz interaktywności – wystarczy kilka linijek JavaScriptu.

Zaczynamy – struktura HTML

Na początek potrzebujesz prostego HTML-a. Nic skomplikowanego – tylko kontener i sześć ścian.

<div class="scene">
  <div class="cube">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</div>

Każda ściana ma klasę .face, a dodatkowo nazwę określającą jej położenie.

Stylowanie kostki – CSS 3D

Teraz przechodzimy do najciekawszej części – ustawiania kostki w przestrzeni 3D.

Podstawowy styl

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #111;
  color: white;
  font-family: Arial, sans-serif;
}

.scene {
  width: 200px;
  height: 200px;
  perspective: 800px;
}

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

Ściany kostki

Każda ściana ma ten sam rozmiar, ale inną transformację.

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #333;
  border: 2px solid #555;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
}

.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

Dzięki translateZ(100px) ściana jest odsunięta od środka kostki o połowę jej szerokości.

Dodajemy interaktywność – obracanie kostki

Możesz zrobić kostkę, która obraca się po kliknięciu. Wystarczy prosty skrypt:

<script>
  const cube = document.querySelector('.cube');
  let x = 0;
  let y = 0;

  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp') x -= 90;
    if (e.key === 'ArrowDown') x += 90;
    if (e.key === 'ArrowLeft') y -= 90;
    if (e.key === 'ArrowRight') y += 90;

    cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg)`;
  });
</script>

Teraz możesz obracać kostkę strzałkami – proste, ale efektowne.

Dodajmy animację – kostka, która się kręci

Jeśli chcesz, żeby kostka obracała się sama:

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

.cube {
  animation: spin 6s infinite linear;
}

Możesz też połączyć animację z interaktywnością – np. zatrzymywać animację po najechaniu myszką.

Jak zrobić kostkę, która losuje wynik?

To już prawie mini-gra. Wystarczy napisać funkcję, która obraca kostkę tak, aby na froncie znalazła się odpowiednia liczba.

<button id="roll">Rzuć kostką</button>

<script>
  const rollBtn = document.getElementById('roll');

  rollBtn.addEventListener('click', () => {
    const result = Math.floor(Math.random() * 6) + 1;

    const rotations = {
      1: 'rotateX(0deg) rotateY(0deg)',
      2: 'rotateX(0deg) rotateY(180deg)',
      3: 'rotateX(0deg) rotateY(-90deg)',
      4: 'rotateX(0deg) rotateY(90deg)',
      5: 'rotateX(-90deg) rotateY(0deg)',
      6: 'rotateX(90deg) rotateY(0deg)',
    };

    cube.style.transform = rotations[result];
  });
</script>

I gotowe – masz interaktywną kostkę, która losuje wynik jak prawdziwa.

Jak ulepszyć kostkę? Pomysły na rozwój

Kiedy już masz podstawową wersję, możesz pójść dalej. Oto kilka pomysłów:

• dodaj tekstury zamiast cyfr,
• zrób kostkę z przezroczystymi ścianami,
• dodaj dźwięk rzutu,
• zrób kilka kostek obok siebie,
• dodaj fizykę (np. losowy obrót + animacja),
• zrób panel statystyk – ile razy wypadła dana liczba.

Możesz też wykorzystać kostkę jako element gry RPG, generator losowych zdarzeń albo po prostu jako ozdobę strony.