3D Transforms

Transform 3D menambahkan satu dimensi pada fungsi yang telah kita kenal: sumbu Z, yang mengarah keluar dari layar ke arah mata. Dengan rotateX dan rotateY elemen bisa berputar seperti pintu berengsel, dengan translateZ elemen bisa mendekat atau menjauh dari pemirsa, dan dengan transform-style: preserve-3d beberapa elemen bisa berbagi satu ruang tiga dimensi. Chapter ini mengulas fungsi-fungsi tersebut satu per satu dan menutupnya dengan pola kartu flip yang menggabungkan semuanya.

Sumbu Z dan Fungsi 3D #

Bayangkan sumbu X memanjang ke kanan layar, sumbu Y ke bawah, dan sumbu Z keluar dari layar. Tiga fungsi bekerja pada dimensi ketiga ini:

Semua fungsi 3D menghasilkan nilai computed berbentuk matrix3d(...) — enam belas angka alih-alih enam. Contoh yang diperiksa demo: rotateX(60deg) tercatat sebagai matrix3d(1, 0, 0, 0, 0, 0.5, 0.866025, 0, 0, -0.866025, 0.5, 0, 0, 0, 0, 1), di mana 0.5 dan 0.866025 adalah cos(60°) dan sin(60°). Fungsi 2D seperti rotate(45deg) tetap terserialisasi sebagai matrix(...) enam angka — bila hasil computed memakai matrix3d, itu tanda transform tersebut memainkan sumbu ketiga.

transform-style: preserve-3d #

Secara bawaan, elemen anak yang ditransformasi 3D diratakan ke bidang induknya — seolah dipipihkan kembali ke layar. Deklarasi transform-style: preserve-3d pada induk mengubahnya: anak-anak tetap hidup dalam ruang 3D bersama, sehingga translateZ salah satu anak benar-benar mendekatkannya relatif terhadap kakaknya. Ruang ini biasanya dipasangkan dengan perspective pada panggung di atasnya, sebagaimana dibahas pada Chapter Perspective .

.panggung  { perspective: 900px; }
.scene     { transform-style: preserve-3d; }
.depan     { transform: translateZ(30px); }
.belakang  { transform: translateZ(-30px) rotateY(180deg); }

1. .panggung menyediakan mata — tanpa perspektif, pergeseran Z tidak tampak.
2. .scene menahan anak-anaknya agar tidak diratakan; nilai computed propertinya berbunyi preserve-3d.
3. .depan dan .belakang menempati dua kedalaman berbeda; matriks .belakang memuat -30 pada posisi geseran Z plus putaran rotateY(180deg) yang membalikkan sisi luarnya.

backface-visibility dan Kartu Flip #

Ketika elemen diputar lebih dari 90 derajat, kita memandang sisi belakangnya — teks dan gambar akan tampak terbalik seperti kaca spion. Properti backface-visibility: hidden menyembunyikan sisi belakang itu, dan justru di sanalah letak kegunaannya: dua sisi kartu ditempel berhadapan, lalu satu sisi muncul bergantian sesuai arah putaran.

Hasil di Browser:

Panggung berisi tiga kotak transform 3D statis: rotateX(60deg), rotateY(60deg),
dan translateZ(40px) yang tampak lebih besar karena mendekat ke mata.
Nilai computed: rotateX(60deg) → matrix3d(1, 0, 0, 0, 0, 0.5, 0.866025, 0,
0, -0.866025, 0.5, 0, 0, 0, 0, 1); rotateY(60deg) → matrix3d(0.5, 0,
-0.866025, 0, 0, 1, 0, 0, 0.866025, 0, 0.5, 0, 0, 0, 0, 1); translateZ(40px)
→ matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 40, 1).
Bawahnya, kartu flip tampil pada sisi muka: pembungkus tercatat
transform-style "preserve-3d", kedua sisi backface-visibility "hidden",
dan sisi belakang tercatat matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0,
0, 0, 0, 1) akibat rotateY(180deg).

Pola kartu flip lengkapnya: pembungkus memakai transform-style: preserve-3d, dua sisi diposisikan absolute di tempat yang sama dengan backface-visibility: hidden, dan sisi belakang diberi rotateY(180deg). Saat pembungkus berputar — misalnya lewat :hover atau kelas .terbalik dengan transform: rotateY(180deg) — sisi muka menyembunyikan dirinya tepat ketika membelakangi kita, sementara sisi belakang menghadap ke depan. Karena putaran kartu adalah gerak besar, bungkus transisinya dengan media query prefers-reduced-motion seperti pada Chapter Motion Accessibility .

Demo chapter ini (tiga-dimensi.html) memuat tiga kotak transform 3D, satu panggung berperspektif, dan kartu flip statis dengan tujuh pemeriksaan data-expected pada transform, transform-style, dan backface-visibility.