CSS mendukung transformasi 3D untuk efek visual yang mendalam.

perspective — mengatur "jarak mata" ke elemen (semakin kecil = efek semakin dramatis):

.container {
  perspective: 800px;
}

Rotasi 3D:

.box {
  transform: rotateX(45deg);  /* putar sumbu X (atas-bawah) */
  transform: rotateY(45deg);  /* putar sumbu Y (kiri-kanan) */
  transform: rotateZ(45deg);  /* putar sumbu Z (seperti rotate biasa) */
}

translate3d — geser di ruang 3D:

.box {
  transform: translate3d(10px, 20px, 30px);
}

transform-style: preserve-3d — mempertahankan ruang 3D untuk child elements:

.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card:hover {
  transform: rotateY(180deg);
}

backface-visibility — sembunyikan sisi belakang elemen saat diputar:

.card-front, .card-back {
  backface-visibility: hidden;
  position: absolute;
}
.card-back {
  transform: rotateY(180deg);
}

Card flip lengkap:

.card-container { perspective: 1000px; }
.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card:hover { transform: rotateY(180deg); }
.card-front, .card-back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%; height: 100%;
}
.card-back { transform: rotateY(180deg); }

🎭 Analogi sehari-hari

Pernah lagi pegang kartu remi terus dibalik buat liat sisi belakang? Itu rotasi 3D di tangan kamu. CSS bisa replicate efek ini di web — tombol yang flip pas hover (kartu tampak depan ke belakang dengan info ekstra), galeri foto yang muter di ruang 3D, card flip animation. perspective itu jarak mata kamu ke kartu — semakin deket, semakin dramatis efek 3D-nya. rotateY(180deg) = balik kartu kanan-kiri. Magic depth tanpa Three.js.

⚠️ Jebakan yang sering ditemui

• perspective di PARENT, transform di CHILD — perspective relatif ke parent.
• Lupa transform-style: preserve-3d = child 3D collapse jadi flat.
• Lupa backface-visibility: hidden = sisi belakang terlihat saat flip (terlihat "hantu" tulisan terbalik).
• Performance OK — GPU accelerated. Tapi terlalu banyak 3D layers bisa lag.
• Animation 3D smooth dengan transition.
• Touch devices sometimes glitchy dengan 3D — test mobile.
• will-change: transform hint untuk GPU.

TL;DR: 3D Transform = depth fake di layar 2D. perspective: 800px di PARENT (jarak mata ke elemen, makin kecil makin dramatis). rotateX/Y/Z rotasi sumbu. translate3d(x, y, z) geser di ruang 3D. transform-style: preserve-3d wajib biar child gak collapse jadi flat. backface-visibility: hidden sembunyiin sisi belakang pas flip. Trio classic untuk card flip: perspective + preserve-3d + backface-visibility. GPU-accelerated.