3D Transform & Perspective — CSS

CSS mendukung transformasi 3D untuk efek visual yang mendalam. perspective — mengatur "jarak mata" ke elemen (semakin kecil = efek semakin dramatis)…

Layar itu datar, tapi CSS bisa memutar elemen di ruang tiga dimensi, kayak kartu yang dimiringkan atau dibalik di tanganmu. Biar putarannya kelihatan punya kedalaman, CSS butuh tahu seberapa jauh mata penonton dari elemen itu. Jarak itulah perspective.

🧪 Tebakan cepat: kartu diputar 40 derajat ke samping, tapi pembungkusnya gak punya perspective. Kartunya kelihatan miring ke dalam layar, atau cuma jadi lebih sempit? Tebak dulu, jawabannya ada di bagian "Panggung dan kartu".

Panggung dan kartu

<div class="panggung">
  <div class="kartu">Halo</div>
</div>

<style>
.panggung {
  perspective: 800px;
}
.kartu {
  transform: rotateY(40deg);
}
</style>

.panggung adalah parent, tempat kartunya berdiri. perspective: 800px di sini artinya mata penonton ada 800px di depan panggung.
.kartu adalah child yang diputar. transform: rotateY(40deg) memutarnya 40 derajat, kayak pintu yang dibuka.
perspective berlaku buat child-nya, bukan buat elemen yang punya properti itu. Jadi perspective di parent, transform di child.

Hasilnya, sisi kartu yang menjauh kelihatan lebih kecil, jadi kartunya terasa miring ke dalam layar. Jawaban tebakan: tanpa perspective, kartu yang sama cuma kelihatan lebih sempit, datar.

Tiga sumbu putar

rotateX(45deg) memutar di garis mendatar, kayak tutup laptop yang dibuka atau ditutup.
rotateY(45deg) memutar di garis tegak, kayak pintu atau kartu yang dibalik ke samping.
rotateZ(45deg) memutar di garis yang menusuk keluar layar, kayak jarum jam. Ini sama dengan rotate() biasa, jadi selalu kelihatan datar walau ada perspective.

Mau dua putaran sekaligus? Tulis dalam satu transform, dipisah spasi: transform: rotateX(20deg) rotateY(30deg);

Jarak mata dan sudut pandang

perspective kecil, misalnya 300px, berarti mata dekat banget, jadi efek 3D-nya dramatis.
perspective besar, misalnya 2000px, berarti mata jauh, jadi efeknya halus, hampir datar.
perspective-origin menentukan dari titik mana penonton melihat. Bawaannya dari tengah. perspective-origin: left top bikin adegannya kelihatan dari kiri atas.

Jangan ketuker dengan transform-origin: itu titik pusat putaran elemennya, bukan posisi penonton.

Kartu yang bisa dibalik

Kartu dua sisi butuh tiga properti:

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

perspective: 1000px di pembungkus kasih kedalaman.
transform-style: preserve-3d di .card menjaga kedua sisinya tetap di ruang 3D bareng kartunya. Tanpa ini, keduanya dipipihkan jadi satu gambar datar.
backface-visibility: hidden di kedua sisi menyembunyikan sisi yang sedang membelakangi kamu.
.card-back dimulai dalam keadaan terbalik (rotateY(180deg)), jadi dia menghadap kamu waktu kartunya dibalik. position: absolute menumpuk kedua sisi di tempat yang sama.

⚠️ Jebakan yang sering ketemu

Dua baris transform di satu aturan. transform: rotateX(45deg); transform: rotateY(45deg); cuma menyimpan yang terakhir. Gabungkan dalam satu baris.
overflow: hidden di elemen preserve-3d. Nilai overflow selain visible memaksa isinya jadi datar lagi.
Sisi kartu gak ditumpuk. Tanpa position: absolute, sisi belakang muncul di bawah sisi depan, bukan di baliknya.

TL;DR: perspective di parent menentukan jarak mata (kecil berarti dramatis, besar berarti halus), lalu child diputar dengan rotateX(), rotateY(), atau rotateZ(). perspective-origin mengatur dari mana penonton melihat. Buat kartu yang dibalik: transform-style: preserve-3d di kartu dan backface-visibility: hidden di kedua sisinya.