Transform 3D memutar elemen pada sumbu yang menghadap ke kita — tetapi tanpa kedalaman, hasilnya hanya berupa gepengan datar. Perspective menghadirkan kedalaman itu: ia meniru mata yang mengamati elemen dari jarak tertentu, sehingga bagian yang “menjauh” tampak menyusut dan bagian yang “mendekat” tampak membesar. Semakin kecil nilai perspektifnya, semakin dekat mata ke elemen, dan semakin dramatis pula efek tiga dimensinya. Pada Chapter ini kita membedah dua cara memberikan perspektif dan cara memilih nilainya.

Properti perspective pada Elemen Induk #

Cara pertama dan paling umum: pasang properti perspective pada elemen induk, lalu semua anak memutar dalam ruang yang berbagi satu titik hilang:

css 
.panggung {
  width: 480px;
  height: 320px;
  perspective: 800px;
}
.panggung .kartu {
  transform: rotateX(45deg);
}

Hasil di Browser:

text 
Dua panggung 480px × 320px masing-masing berisi kartu yang sama dengan
rotateX(45deg). Panggung pertama (perspective: 800px) menampilkan kartu
dengan kemiringan lembut; panggung kedua (perspective: 300px) menampilkan
kartu dengan kemiringan yang jauh lebih dramatis. Nilai computed yang
diperiksa harness: panggung-jauh perspective "800px", panggung-dekat
perspective "300px", perspective-origin "240px 160px"; kedua kartu tetap
mencatat matrix3d(1, 0, 0, 0, 0, 0.707107, 0.707107, 0, 0, -0.707107,
0.707107, 0, 0, 0, 0, 1) — perspektif induk tidak mengubah matriks anak.

Poin terakhir di atas penting: perspektif adalah properti induk, sehingga nilai computed transform kartu tetap murni rotateX(45deg). Efek kedalaman diterapkan browser saat menggambar, di luar matriks kartu itu sendiri. Juga perhatikan perspective-origin — titik hilang ruang, bawaan 50% 50%, yang computed-nya dihitung dalam piksel (240px 160px pada panggung 480px × 320px) sama seperti perilaku transform-origin pada Chapter sebelumnya.

Mari kita telaah aturannya:

  1. perspective: 800px berarti mata dianggap berjarak 800 piksel dari bidang layar. Nilai ini diwarisi efeknya ke seluruh anak panggung — semua kartu berbagi satu dunia 3D yang koheren.
  2. perspective: 300px menempatkan mata lebih dekat; kartu yang sama tampak jauh lebih miring dan bagian tepinya membesar tidak seimbang. Untuk kartu berukuran puluhan hingga ratusan piksel, rentang 600–1200px adalah titik awal yang wajar.
  3. perspective: none (bawaan) menghilangkan kedalaman: rotateX hanya menggepangkan kartu menjadi garis tanpa ilusi jarak.

Fungsi perspective() pada Elemen #

Cara kedua menaruh perspektif langsung pada transform elemen, sebagai fungsi paling kiri:

css 
.kartu-fungsi {
  transform: perspective(800px) rotateY(45deg);
}

Hasilnya serupa secara konsep, tetapi cakupannya berbeda: fungsi perspective() hanya berlaku untuk transform pada elemen itu sendiri, sementara properti perspective pada induk menciptakan ruang bersama bagi semua anak. Ketika dua kartu bersebelahan masing-masing memakai fungsi perspective(), keduanya punya titik hilang sendiri-sendiri; dengan properti induk, keduanya tunduk pada satu titik hilang yang sama — itulah sebabnya galeri kartu 3D umumnya memakai properti pada induk.

Nilai computed dua cara ini berbeda pula. Fungsi perspective() bercampur ke dalam matriks elemen, sehingga probe demo mencatat kartu fungsi sebagai matrix3d(0.707107, 0, -0.707107, 0.000883883, 0, 1, 0, 0, 0.707107, 0, 0.707107, -0.000883883, 0, 0, 0, 1) — komponen kecil 0.000883883 adalah bekas pembagian 0.707107 / 800 yang menjadi ciri khas perspektif di dalam matriks.

Satu batasan yang sering mengejutkan: properti perspective hanya memengaruhi anak langsung pemiliknya. Bila kartu berada di dalam pembungkus tambahan di bawah panggung, kedalaman itu tidak sampai — solusinya memberi transform-style: preserve-3d pada tiap tingkat perantara sehingga ruang 3D tersambung turun. Rangkaian lengkap panggung–scene–kartu ini kita praktikkan pada Chapter 3D Transforms .

Demo chapter ini (perspective.html) menampilkan dua panggung berdampingan dengan nilai perspektif berbeda serta satu kartu berfungsi perspective(), dilengkapi lima pemeriksaan data-expected pada perspective, perspective-origin, dan transform.