3D dan CSS

bookmark_border Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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 game atau beberapa antarmuka pengguna lanjutan. 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 (lagipula 3D tidak mudah).

Model Transformasi 3D CSS diperkenalkan sebagai spesifikasi Draf pada Maret 2009 untuk memungkinkan developer web membuat antarmuka pengguna yang menarik dan menarik yang memanfaatkan 3D dengan mengizinkan 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 masuk. Anda tidak perlu lagi menjadi jagoan matematika untuk membuat elemen 3D.

Perlu diperhatikan bahwa modul CSS 3D 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

-webkit-transform-3d

Informasi penting yang perlu diingat adalah meskipun browser mungkin "mendukung" 3D, browser tersebut mungkin tidak dapat merender 3D karena keterbatasan hardware 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? Saya harap Anda tidak akan bertanya. Developer telah menggunakan alat seperti Modernizr untuk mendeteksi dukungan untuk fitur dan kemampuan browser tertentu. Meskipun dapat mendeteksi keberadaan dukungan untuk transformasi 3D, keberadaan akselerasi hardware tidak dapat dideteksi, dan akselerasi hardware adalah komponen utamanya.

Contoh Dasar

Tidak ada yang lebih baik daripada langsung mencoba. 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 menentukan cara kedalaman tampilan 3D dirender, nilai dari 1-1000 akan menghasilkan efek yang sangat jelas, dan nilai di atas 1000 akan menghasilkan efek yang kurang jelas. 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.

Menganimasikan

Hal yang saya sukai dari transformasi 3D CSS3 adalah transformasi ini sangat cocok dengan modul Transisi CSS. Animasi dan transisi mudah ditentukan di CSS, dan menerapkannya ke 3D tidak terkecuali.

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.

Kita telah memfaktorkan ulang contoh sebelumnya untuk menggunakan gaya dokumen, bukan gaya inline. Hal ini tidak hanya memperjelas contoh, tetapi juga memungkinkan contoh memanfaatkan pemilih pseudo :hover. Dengan menggunakan pemilih :hover, transisi dapat dimulai dengan hanya mengarahkan mouse 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.