10 Proyek 3D Menakjubkan Dibangun Sepenuhnya Dengan CSS & JavaScript

Web telah berkembang jauh dari Internet dial-up dan halaman GeoCities. Situs web sekarang sepenuhnya responsif dan dapat diakses dari perangkat layar sentuh. Tetapi browser modern telah mengambil hal-hal lebih jauh di luar desain web "arus utama".

Dimungkinkan untuk membuat efek 3D yang menakjubkan di browser hanya dengan menggunakan teknologi frontend. Dan dalam posting ini, saya akan menampilkan proyek web 3D favorit saya yang menunjukkan seberapa jauh web telah berkembang dalam beberapa dekade singkat.

Kotak Perspektif

Percaya atau tidak animasi kotak ini dibuat dengan transformasi CSS3 murni. Kubus yang sebenarnya cukup mudah untuk dirender menggunakan CSS dan warna bergantian bekerja dengan kelas yang berbeda.

Animasi ini menggunakan animasi keyframe perulangan untuk memberikan ilusi kotak-kotak ini memantul dalam ruang 3D. Dengan mengklik salah satu tombol perspektif di sudut kanan atas, Anda bahkan dapat melihat model 3D ini dari berbagai sudut. Cukup keren!

Grafik CSS3 Murni

Satu lagi contoh animasi CSS3 murni adalah grafik batang yang dibuat oleh Ana Tudor ini. Ini menggunakan wadah HTML sederhana dengan empat div bagian dalam yang mewakili empat sisi setiap persegi panjang.

Bilahnya cukup mudah untuk dianimasikan menggunakan CSS3 dan semuanya tumbuh hingga ketinggian yang bervariasi. Tetapi bagian yang paling mengesankan adalah bagaimana seluruh animasi ini memutar sudut pandang bahkan saat grafik batang berkembang.

Ini menggunakan banyak kode Sass untuk mengotomatisasi animasi dengan fungsi perhitungan sehingga agak teknis. Tetapi jika Anda mencoba mempelajari lebih lanjut tentang 3D, maka ini adalah pena yang kuat untuk dipelajari.

Visi Terowongan

Untuk pengalaman browser Webkit trippy, lihat terowongan 3D ini yang dibuat hanya dengan beberapa transformasi CSS3 dan properti Sass.

Warna bergantian dijalankan melalui Sass for loop yang mengganti nilai warna HSL setelah jangka waktu tertentu. Lingkaran ini memberikan ilusi bahwa Anda bepergian melalui terowongan potongan confetti berwarna-warni tanpa batas. Cukup liar!

Ini mungkin tidak tampak seperti sesuatu yang istimewa dan jelas tidak praktis untuk situs web besar. Tetapi ini adalah bukti seberapa banyak yang dapat Anda lakukan dengan kreativitas dan pengetahuan pengkodean.

iPhone 3D dalam CSS

IPhone 4 menawarkan desain baru yang radikal dan membuat semua orang bersemangat untuk smartphone baru yang mematikan. Pengembang Jonathan Levaillant pasti sangat menikmati iPhone 4 karena dia membuat ulang desain dalam CSS murni.

Saat perangkat berputar, perangkat ini sangat keren. Itu memang terlihat seperti iPhone dan pita luarnya bahkan memantulkan cahaya dengan gradien yang realistis. Layar iPhone memutar video mp4 yang dihosting di server Apple dan juga terdistorsi dengan benar dalam perspektif.

Apa yang paling gila tentang ini adalah bagaimana ia hanya mengandalkan CSS untuk semuanya. Saya akan bersemangat dalam 10 tahun lagi ketika iPhone CSS3 murni sepenuhnya interaktif di browser.

Tata Surya 3D

Bima Sakti adalah sudut kecil alam semesta kita dan sepenuhnya terwakili dalam pena menakjubkan yang dibuat oleh Julian Garnier ini.

Itu memang menggunakan banyak CSS tetapi sebagian besar efek yang dapat disesuaikan bergantung pada JavaScript. Ini memungkinkan Anda mengubah kecepatan, ukuran, dan jarak berbagai planet.

Anda bahkan dapat beralih antara tampilan 3D dan tampilan 2D overhead dengan relatif mudah. Bicara tentang penggunaan pengembangan frontend yang luar biasa!

Kubus berbayang

Kubus berbayang sederhana ini mungkin tidak tampak banyak. Mereka dibangun di CSS dan mereka secara otomatis berputar pada satu sumbu menggunakan animasi CSS3.

Tapi ada pengaturan interaktif di mana Anda dapat menganimasikan kubus pada mouse hover. Ini jelas merupakan trik yang keren dan bergantung pada beberapa teknik CSS yang langka termasuk kelas semu :hover dan :checked bersama dengan tilde(~) selector .

Korsel 3D CSS

Korsel gambar sangat bagus untuk menampilkan grafik, foto, dan bahkan video secara bergiliran. Dan dengan korsel CSS3 ini, Anda dapat membawa bilah geser yang menyenangkan ini ke tingkat yang sama sekali baru.

Korsel 3D yang sangat mendasar ini bergantung pada peristiwa klik untuk menghidupkan di antara berbagai elemen. Gaya 3D sangat detail dan hanya mengandalkan kode CSS.

Satu-satunya JavaScript yang diperlukan di sini adalah beralih di antara tombol berikutnya/sebelumnya dan menganimasikan gaya 3D ke tempatnya. Dan ini sebenarnya adalah sesuatu yang dapat Anda gunakan di situs nyata sehingga dapat digunakan secara praktis dalam desain web modern.

Dinginkan Singa

Ini sesuatu yang sedikit kurang praktis tetapi masih sangat menyenangkan untuk digunakan. Render singa 3D oleh Karim Maaloul ini menggunakan Three.js untuk membuat permainan yang menyenangkan di mana Anda dapat meniupkan udara sejuk pada singa yang berkeringat.

Saat Anda menggerakkan kipas di sekitar halaman dengan kursor, tatapan singa akan mengikuti. Kemudian cukup klik untuk menyalakan kipas bermotor dan saksikan kegembiraan singa saat Anda mengirimkan aliran udara dingin ke arahnya.

Pengembang bahkan melangkah lebih jauh dengan membuat area mengepak di surai singa bersama dengan gerakan di kumisnya.

Ini adalah contoh detail lainnya tentang seberapa jauh efek 3D telah berkembang.

Pengontrol NES 3D

Game klasik meninggalkan jejaknya pada generasi pembuat kode saat ini dan Anda dapat melihatnya dengan pengontrol 3D NES Johan van Tongeren yang dirender dalam CSS3 murni.

Ini berfungsi paling baik di browser Chrome/WebKit meskipun seharusnya ditampilkan dengan baik di Firefox juga. Ini benar-benar lebih merupakan eksperimen untuk melihat seberapa jauh CSS telah berkembang, jadi jangan berharap itu sempurna!

Orbit Kepler

Saya tidak dapat membayangkan berapa lama waktu yang dibutuhkan untuk membangun model jalur orbit Kepler yang realistis ini. Model ini menunjukkan pergerakan tubuh relatif terhadap yang lain di ruang angkasa, dan dalam hal ini pengembang Danie Clawson melakukan pekerjaan yang luar biasa.

Seluruh model ini menggunakan CSS untuk visual dan Three.js untuk efek 3D. Di pojok kiri atas Anda akan menemukan kotak opsi tempat Anda dapat mengubah banyak variabel orbit untuk memengaruhi kecepatan, ukuran, dan penempatan objek.

Anda bahkan mungkin memperhatikan bahwa objek yang mengorbit menggunakan cahaya realistis dengan bayangan berdasarkan sisi mana yang mengarah ke matahari. Ini sangat mengesankan dan termasuk sebagai #1 dalam daftar ini untuk perhatian besar terhadap detail.

Saya harap contoh-contoh ini dapat menginspirasi Anda untuk mempelajari lebih lanjut tentang pengembangan frontend dan bahkan mungkin membuat proyek 3D Anda sendiri.