3D dan CSS

Paul Kinlan

Pengantar

Selama ini, 3D telah menjadi aplikasi desktop. Baru-baru ini, dengan diperkenalkannya smartphone canggih yang memiliki akses ke akselerasi GPU native, kami mulai melihat 3D digunakan hampir di mana-mana.

Umumnya, 3D terutama digunakan sebagai perangkat untuk bermain game atau beberapa antarmuka pengguna tingkat lanjut. Baru setelah diperkenalkannya transformasi Perspektif di WPF dan Silverlight, model yang sesuai untuk menerapkan efek 3D ke elemen antarmuka pengguna menjadi solusi praktis bagi developer aplikasi (lagi pula, 3D tidak mudah).

Model Transformasi 3D CSS diperkenalkan sebagai spesifikasi Draf pada Maret 2009 untuk memungkinkan developer 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.

Kita belum pernah bisa membuat antarmuka 3D dengan begitu mudah. Teknologi ini telah menurunkan hambatan untuk memasuki pasar. Anda tidak perlu lagi menjadi jagoan matematika untuk membuat elemen 3D.

Perlu diperhatikan bahwa modul 3D CSS dirancang untuk membantu developer membuat aplikasi yang kaya dan menarik secara visual, bukan dirancang untuk memungkinkan Anda membuat dunia 3D yang imersif.

Dukungan Browser dan Akselerasi Hardware

-webkit-perspective

Dukungan Browser

• 36
• 12
• 16
• 9

Sumber

-webkit-transform-3d

Dukungan Browser

• 2
• 12
• 49
• 4

Sumber

Bagian penting dari informasi yang harus diingat adalah bahwa meskipun browser mungkin "mendukung" 3D, mungkin tidak dapat merender 3D karena keterbatasan perangkat keras dan driver. Scene 3D berdasarkan DOM dapat sangat mahal secara komputasi. Oleh karena itu, vendor browser telah memutuskan untuk memanfaatkan GPU yang mungkin tidak tersedia di semua platform, daripada memperlambat browser dengan solusi rendering software murni

Deteksi Fitur

Bagaimana dengan deteksi fitur? Kuharap kamu tidak menanyakannya! Developer telah menggunakan alat seperti Modernizr untuk mendeteksi dukungan bagi fitur dan kemampuan browser tertentu. Meskipun dukungan untuk transformasi 3D dapat dideteksi, deteksi adanya akselerasi hardware tidak mungkin dilakukan, dan akselerasi hardware adalah bahan utamanya.

Contoh Dasar

Tidak ada yang lebih baik daripada melompat langsung. Dalam contoh ini, kita akan menerapkan kumpulan rotasi dasar 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 menentukan bagaimana kedalaman adegan 3D dirender, nilai dari 1-1000 akan menghasilkan efek yang sangat jelas, dan nilai lebih dari 1000 lebih sedikit. Kemudian, kita 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! Hanya itu, elemen ini sepenuhnya interaktif, dan dalam semua hal, elemen ini adalah elemen DOM yang sepenuhnya matang (kecuali sekarang terlihat lebih keren). Jika browser Anda tidak mendukung transformasi 3D, tidak akan terjadi apa pun. Anda hanya akan melihat iframe sederhana tanpa rotasi yang diterapkan. Jika browser Anda mendukung transformasi 3D, tetapi tanpa akselerasi hardware, tampilannya mungkin terlihat sedikit aneh.

Membuat animasi

Hal yang saya sukai dari transformasi 3D CSS3 adalah keterkaitannya yang sangat indah dengan modul Transisi CSS. Animasi dan transisi mudah ditentukan di CSS, demikian juga penerapannya ke 3d.

Menganimasikan elemen yang memiliki perspektif 3D yang diterapkan sangat mudah. Cukup tetapkan gaya "transisi" menjadi "transformasi", lampirkan durasi dan fungsi animasi. Mulai saat itu, setiap perubahan pada gaya "transform" akan dianimasikan.

Kami telah memfaktorkan ulang contoh sebelumnya untuk menggunakan gaya dokumen, bukan gaya inline. Tidak hanya menghapus contoh, tetapi juga memungkinkan contoh memanfaatkan pemilih pseudo :hover. Dengan menggunakan pemilih :hover, transisi dapat dimulai dengan hanya mengarahkan kursor ke elemen. Keren!

Ringkasan

Ini hanyalah sekilas tentang beberapa efek keren yang dapat diterapkan ke elemen DOM yang terlihat menggunakan transformasi 3D CSS. Masih ada banyak hal yang dapat dilakukan yang belum dibahas dalam tutorial ini.