3D Animations dengan CSS

CSS 3D Transform memungkinkan kamu membuat animasi tiga dimensi tanpa WebGL atau library berat. Browser menggunakan GPU untuk merender transformasi 3D, sehingga performant dan smooth.

perspective — Kunci 3D

perspective menentukan jarak antara viewer dan bidang z=0. Semakin kecil nilainya, efek 3D semakin dramatis:

/* Set perspective di parent container */
.scene {
  perspective: 800px;
  /* atau pendek: */
  /* transform: perspective(800px); */
}

/* Sekarang child bisa pakai 3D transform */
.card {
  transform: rotateY(45deg); /* akan tampak 3D */
}

Transform 3D

/* Rotasi di tiga sumbu */
.box {
  transform: rotateX(30deg);  /* miring atas-bawah */
  transform: rotateY(45deg);  /* miring kiri-kanan */
  transform: rotateZ(15deg);  /* rotasi 2D biasa */
  transform: rotate3d(1, 1, 0, 45deg); /* rotasi sumbu custom */
}

/* Translasi di sumbu Z */
.box {
  transform: translateZ(100px); /* maju ke depan */
  transform: translate3d(20px, 30px, 50px); /* X, Y, Z */
}

/* Scale 3D */
.box {
  transform: scaleZ(2); /* skala di sumbu Z */
  transform: scale3d(1.2, 1.2, 1); /* X, Y, Z scale */
}

transform-style: preserve-3d

Penting untuk membuat elemen anak juga berada dalam ruang 3D:

.scene {
  perspective: 1000px;
}

.card-wrapper {
  transform-style: preserve-3d; /* anak juga di ruang 3D */
  transition: transform 0.6s ease;
}

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

.card-front,
.card-back {
  position: absolute;
  backface-visibility: hidden; /* sembunyikan sisi belakang */
}

.card-back {
  transform: rotateY(180deg); /* tempatkan di belakang */
}

Flip Card

.flip-container {
  perspective: 1000px;
}

.flip-card {
  position: relative;
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

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

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  backface-visibility: hidden;
}

.flip-back {
  background: #3b82f6;
  transform: rotateY(180deg);
}

CSS 3D Cube

.cube {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: rotateCube 8s linear infinite;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  opacity: 0.8;
}

.front  { transform: translateZ(50px); background: rgba(59, 130, 246, 0.5); }
.back   { transform: rotateY(180deg) translateZ(50px); background: rgba(16, 185, 129, 0.5); }
.left   { transform: rotateY(-90deg) translateZ(50px); background: rgba(245, 158, 11, 0.5); }
.right  { transform: rotateY(90deg) translateZ(50px); background: rgba(239, 68, 68, 0.5); }
.top    { transform: rotateX(90deg) translateZ(50px); background: rgba(139, 92, 246, 0.5); }
.bottom { transform: rotateX(-90deg) translateZ(50px); background: rgba(236, 72, 153, 0.5); }

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

perspective-origin — Sudut Pandang

.scene {
  perspective: 1000px;
  /* Ubah sudut pandang viewer */
  perspective-origin: 50% 50%;  /* default: center */
  perspective-origin: 0% 50%;   /* dari kiri */
  perspective-origin: 100% 0%;  /* dari kanan atas */
}

3D dengan JavaScript Interaktif

// Card mengikuti gerakan mouse
const card = document.querySelector('.card-3d');

card.addEventListener('mousemove', (e) => {
  const rect = card.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;

  const rotateY = ((e.clientX - centerX) / rect.width) * 20;
  const rotateX = -((e.clientY - centerY) / rect.height) * 20;

  card.style.transform =
    \`perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)\`;
});

card.addEventListener('mouseleave', () => {
  card.style.transform = 'perspective(800px) rotateX(0) rotateY(0)';
  card.style.transition = 'transform 0.5s ease';
});

CSS 3D Transform sangat powerful untuk flip cards, carousel 3D, efek parallax, dan animasi presentasi — semua tanpa perlu library eksternal atau WebGL.