Asal Transformasi dan Perspektif
Ubah titik poros transformasi dengan transform-origin dan tambahkan kedalaman dengan perspective.
Asal Transformasi dan Perspektif adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Bawaan transform-origin
Secara bawaan, transformasi terjadi di sekitar titik tengah elemen: 50% 50%. Properti transform-origin mengubah poros ini.
Menetapkan transform-origin
Menerima kata kunci, persentase, atau panjang. Format: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>transform-origin dengan Scale
Mengubah skala dari sudut kiri atas (berguna untuk animasi perluasan menu dropdown):
<div class="dropdown open">Dropdown menu</div>transform-origin dengan Rotasi
Memutar jarum jam pada bagian pangkalnya:
<div class="clock"><div class="hand"></div></div>Properti perspective
perspective menetapkan jarak antara pengguna dan bidang z=0 untuk transformasi 3D. Nilai yang lebih kecil menghasilkan distorsi perspektif yang lebih dramatis; nilai yang lebih besar menghasilkan kedalaman yang lebih halus.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Mengubah titik hilang perspektif. Nilai bawaannya adalah bagian tengah (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective sebagai Fungsi
perspective() juga dapat digunakan sebagai fungsi transformasi pada elemen itu sendiri, bukan pada elemen induk. Dengan demikian, konteks 3D hanya berlaku pada elemen tersebut.
<div class="card">Card</div>transform-style: preserve-3d
Secara bawaan, transformasi 3D elemen anak diratakan menjadi 2D. Tetapkan transform-style: preserve-3d pada elemen induk untuk mempertahankan posisi 3D sebenarnya dari elemen anak.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Efek Pembalikan Kartu
Kartu pembalik klasik menggunakan perspektif dan preserve-3d:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden menyembunyikan sisi belakang elemen yang ditransformasi dalam 3D. Ini penting untuk kartu pembalik yang sisi belakangnya tidak boleh terlihat melalui bagian depan.
Menggabungkan Perspektif dan Asal
Efek kemiringan 3D dramatis saat kursor diarahkan, yang merespons posisi kursor:
<div class="card demo-active">3D Tilt Card</div>Pemeriksaan Singkat
Sebuah dropdown menggunakan transform: scaleY(0) untuk menyembunyikan dan scaleY(1) untuk menampilkan. transform-origin mana yang membuatnya membesar ke bawah dari bagian atas?
Ringkasan
transform-origin mengubah titik poros untuk rotasi dan perubahan skala — sangat penting untuk perluasan dropdown, jarum jam, dan kemiringan saat kursor diarahkan. perspective pada elemen induk menciptakan konteks kedalaman 3D. transform-style: preserve-3d mengaktifkan elemen 3D bertingkat. backface-visibility: hidden menyembunyikan sisi belakang elemen dalam efek pembalikan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Asal Transformasi dan Perspektif” gratis?
Ya — teks lengkap “Asal Transformasi dan Perspektif” 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 “Asal Transformasi dan Perspektif”?
Ubah titik poros transformasi dengan transform-origin dan tambahkan kedalaman dengan perspective. 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 3 dari 4.
Berapa lama pelajaran “Asal Transformasi dan Perspektif” 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