Pengantar
Untuk waktu yang lama, 3D telah menjadi pelestarian aplikasi desktop. Baru-baru ini dengan diperkenalkannya ponsel cerdas canggih yang memiliki akses ke akselerasi GPU asli, kami mulai melihat penggunaan 3D hampir di mana-mana.
Umumnya, 3D terutama digunakan sebagai perangkat untuk {i>game<i} atau beberapa antarmuka pengguna tingkat lanjut. Baru setelah diperkenalkannya transformasi Perspective di WPF dan Silverlight, model yang sesuai untuk menerapkan efek 3D pada elemen antarmuka pengguna menjadi solusi praktis bagi pengembang aplikasi (lagi pula, semua 3D tidaklah mudah).
Model Transformasi 3D CSS diperkenalkan sebagai spesifikasi Draf pada Maret 2009 untuk memungkinkan pengembang web membuat antarmuka pengguna yang menarik dan memikat yang memanfaatkan 3D dengan memungkinkan penulis aplikasi menerapkan transformasi perspektif 3D ke elemen DOM visual apa pun.
Draf Kerja Transformasi 3D CSS adalah ekstensi logis untuk Model Transformasi 2D CSS, yang memperkenalkan beberapa properti tambahan, termasuk: perspektif, rotasi, dan transformasi dalam ruang 3D.
Belum pernah kami dapat membuat antarmuka 3D dengan mudah. Teknologi ini telah menurunkan hambatan untuk masuk. Anda tidak perlu lagi menjadi ahli matematis untuk membangun elemen 3d.
Perlu dicatat bahwa modul 3D CSS dirancang untuk membantu pengembang membangun aplikasi yang kaya dan menarik secara visual, modul ini tidak dirancang untuk memungkinkan Anda membangun dunia 3D yang imersif.
Dukungan Browser dan Akselerasi Hardware
{i>-webkit-perspective<i}
-webkit-transform-3d
Bagian informasi penting yang harus diingat adalah bahwa meskipun browser mungkin "mendukung" 3d, browser mungkin tidak dapat merender 3D karena keterbatasan perangkat keras dan driver. Scene 3D berdasarkan DOM bisa sangat mahal secara komputasi dan oleh karena itu vendor browser telah memutuskan daripada memperlambat browser dengan solusi rendering software murni, mereka justru akan memanfaatkan GPU yang mungkin tidak tersedia di semua platform
Deteksi Fitur
Bagaimana dengan deteksi fitur? Kuharap kamu tidak akan bertanya! Developer telah menggunakan alat seperti Modernizr untuk mendeteksi dukungan bagi fitur dan kemampuan browser tertentu. Meskipun ada kemungkinan untuk mendeteksi adanya dukungan untuk transformasi 3D, tidak mungkin untuk mendeteksi keberadaan akselerasi hardware, dan akselerasi hardware adalah unsur utamanya.
Contoh Dasar
Tidak ada yang lebih baik daripada langsung mengambil langkah. Dalam contoh ini, kita akan menerapkan kumpulan rotasi dasar dari elemen DOM arbitrer.
Kita mulai dengan menentukan perspektif pada elemen root.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
Perspektif penting karena mendefinisikan bagaimana kedalaman tampilan 3D ditampilkan, nilai dari 1-1000 akan menghasilkan efek yang sangat jelas, dan nilai yang lebih dari 1000 kurang begitu. Kemudian kami menambahkan iframe dan menerapkan rotasi 30 derajat di sekitar sumbu Z dan Y
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
BAM! Itu saja, elemen ini sepenuhnya interaktif, dan dalam semua hal, ini adalah elemen DOM yang lengkap (kecuali sekarang elemen ini terlihat lebih keren). Jika browser tidak mendukung transformasi 3D, tidak akan terjadi apa-apa. Anda hanya akan melihat iframe sederhana tanpa rotasi yang diterapkan. Jika browser Anda mendukung transformasi 3D tetapi tanpa akselerasi hardware, tampilan mungkin akan terlihat sedikit aneh.
Menganimasikan
Hal yang saya sukai dari transformasi 3D CSS3 adalah keterkaitannya yang sangat indah dengan modul Transisi CSS. Animasi dan transisi mudah didefinisikan di CSS, tidak terkecuali penerapannya pada 3d.
Anda dapat menganimasikan elemen yang menerapkan perspektif 3D dengan mudah. Cukup setel gaya "transisi" menjadi "transformasi", tambahkan durasi dan fungsi animasi. Sejak saat itu, setiap perubahan pada gaya "tranform" akan dianimasikan.
Kami telah memfaktorkan ulang contoh sebelumnya untuk menggunakan gaya dokumen, bukan gaya inline. Tidak hanya menghapus contoh, tetapi juga memungkinkan sampel memanfaatkan pemilih pseudo :hover. Dengan menggunakan pemilih :hover, transisi dapat dimulai hanya dengan menggerakkan mouse ke elemen. Keren!
Ringkasan
Ini hanyalah sekilas pandang atas beberapa efek keren yang dapat diterapkan ke setiap elemen DOM yang terlihat menggunakan transformasi 3D CSS. Masih banyak hal yang dapat dilakukan yang belum dibahas dalam tutorial ini.