[HTML|CSS|JavaScript] Tworzymy kostkę 3D w CSS3 (3D cube)

W tym wpisie stworzymy kostkę 3D, czyli trójwymiarowy kwadrat lub jak kto woli - sześcian z użyciem CSS3. Ponadto dodamy obsługę JavaScript do obracania kostką za pomocą dotyku.

Do czego może Ci się to przydać? Nie wiem ;) Poznasz praktyczne wykorzystanie właściwości CSS transform.

Przykładowa kostka

Kod

Tworzenie kostki 3D zaczniemy od kodu HTML - trzeba utworzyć kontener dla kostki oraz jej 6 boków:

<div class="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face top" style="background-color:rgba(0,100,0, 0.4);"></div>
        <div class="face bottom" style="background-color:rgba(0,100,0, 0.4);"></div>
        <div class="face left"></div>
        <div class="face right"></div>
</div>

Kolejna rzecz to ostylowanie kostki, a mianowicie dodanie reguł transformacji rotateX, rotateY, translateZ oraz pozostałych "upiększających". Transformacja rotateX obraca element wokół osi poziomej, rotateY obraca element wokół osi pionowej, natomiast translateZ przemieszcza element wzdłuż osi z w przestrzeni 3D. Właściwość transform-style określa czy elementy potomne mają być pozycjonowane w płaszczyźnie czy w przestrzeni 3D. W naszym przypadku użyliśmy wartości preserve-3d, czyli pozycjonowania w przestrzeni 3D.

.cube {
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	width: 100px;
	height: 100px;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(45deg) rotateY(45deg);
	transition: transform 0.5s;
}

.face {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: lightgreen;

}

.front {
	transform: translateZ(50px);
}

.back {
	transform: rotateY(180deg) translateZ(50px);
}

.top {
	transform: rotateX(90deg) translateZ(50px);
}

.bottom {
	transform: rotateX(-90deg) translateZ(50px);
}

.left {
	transform: rotateY(-90deg) translateZ(50px);
}

.right {
	transform: rotateY(90deg) translateZ(50px);
}

Pozostało jeszcze dodać obsługę obracania kostką za pomocą przesunięcia palcem:

const cube = document.querySelector('.cube');
let initialX = null;
let initialY = null;
let xAngle = 45;
let yAngle = 45;

function handleTouchStart(event) {

   initialX = event.touches[0].clientX;
   initialY = event.touches[0].clientY;

}

function handleTouchMove(event) {

   if (initialX === null || initialY === null) {

      return;

   }

   const currentX = event.touches[0].clientX;
   const currentY = event.touches[0].clientY;

   const deltaX = currentX - initialX;
   const deltaY = currentY - initialY;

   yAngle += deltaX * 0.2;
   xAngle -= deltaY * 0.2;

   cube.style.transform = 'rotateX(' + xAngle + 'deg) rotateY(' + yAngle + 'deg)';

   initialX = currentX;
   initialY = currentY;

}

function handleTouchEnd() {

   initialX = null;
   initialY = null;

}

cube.addEventListener('touchstart', handleTouchStart);
cube.addEventListener('touchmove', handleTouchMove);
cube.addEventListener('touchend', handleTouchEnd);