Transformasi 3D: rotateX rotateY translateZ
Putar dan pindahkan elemen dalam ruang tiga dimensi menggunakan fungsi transformasi CSS 3D.
Transformasi 3D: rotateX rotateY translateZ adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Ikhtisar Transformasi 3D
Transformasi 3D CSS memperluas sistem 2D ke dimensi ketiga menggunakan sumbu Z. Aktifkan 3D dengan perspective pada elemen induk dan transform-style: preserve-3d untuk elemen 3D bertingkat.
rotateX()
rotateX(angle) memutar elemen pada sumbu X horizontal — seperti membalik halaman ke arah Anda atau menjauhi Anda.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
rotateY(angle) memutar elemen pada sumbu Y vertikal — seperti memutar pintu pada engselnya.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
rotateZ(angle) identik dengan fungsi 2D rotate() — rotasi pada bidang layar.
rotate3d()
rotate3d(x, y, z, angle) memutar elemen pada vektor sumbu 3D khusus. Nilai x, y, dan z menentukan arah sumbu tersebut.
<div class="element">3D</div>translateZ()
translateZ() memindahkan elemen mendekati atau menjauhi pengamat sepanjang sumbu Z. Nilai positif mendekatkan; nilai negatif menjauhkan.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
translate3d(x, y, z) memindahkan elemen pada ketiga sumbu sekaligus. Menggunakan translateZ(0) memaksa promosi ke lapisan GPU (trik performa yang umum).
<div class="animated">GPU layer</div>scale3d()
scale3d(x, y, z) mengubah skala dalam tiga dimensi. scaleZ() mengubah skala kedalaman — berguna untuk sisi kubus 3D.
Contoh Kubus 3D
Membangun kubus menggunakan transformasi 3D pada enam sisi:
<div class="cube-scene">
<div class="cube">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face left">Left</div>
<div class="cube-face right">Right</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</div>Efek 3D Paralaks
Menggunakan translateZ pada elemen anak menciptakan kedalaman dalam adegan 3D yang dapat digulir (Paralaks CSS):
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>Akselerasi Perangkat Keras
Transformasi 3D (bahkan yang sederhana seperti translateZ(0)) memaksa elemen masuk ke lapisan GPU-nya sendiri. Hal ini mencegah pengecatan selama animasi, tetapi menggunakan memori GPU. Gunakan secara sengaja, bukan sebagai trik untuk semua situasi.
Pemeriksaan Singkat
Fungsi transformasi mana yang memindahkan elemen sepanjang sumbu Z (mendekati atau menjauhi pengamat)?
Ringkasan
Transformasi CSS 3D menggunakan rotateX/Y/Z() untuk memutar elemen pada setiap sumbu dan translateZ() untuk memindahkannya dalam kedalaman. Aktifkan 3D sebenarnya dengan perspective pada elemen induk dan transform-style: preserve-3d. Gunakan backface-visibility: hidden untuk efek pembalikan. Transformasi 3D memaksa promosi ke lapisan GPU agar animasi berjalan mulus.
Belajar CSS dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Transformasi 3D: rotateX rotateY translateZ” gratis?
Ya — teks lengkap “Transformasi 3D: rotateX rotateY translateZ” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Transformasi 3D: rotateX rotateY translateZ”?
Putar dan pindahkan elemen dalam ruang tiga dimensi menggunakan fungsi transformasi CSS 3D. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Transformasi 3D: rotateX rotateY translateZ” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Translate, Rotate, dan Scale
- Transformasi Skew dan Matrix
- Asal Transformasi dan Perspektif
- Transformasi 3D: rotateX rotateY translateZ