Menambahkan fitur 3D ke situs web Anda tidak pernah semudah ini. Berkat kemajuan dalam CSS dan JavaScript, sekarang ada metode dan kerangka kerja bawaan untuk melakukannya. Terlebih lagi, alat canggih ini membuka pintu bagi kreativitas yang serius.
Dan sementara animasi 3D digunakan secara luas, dimensi ketiga dapat digunakan dengan cara lain. Wadah konten seperti UI kartu, tombol, atau tipografi, dapat memanfaatkan efeknya, seperti halnya demo produk dan infografis. Ada banyak kemungkinan.
Secara khusus, fitur 3D bisa sangat menyenangkan. Baik Anda menggunakannya untuk memberi daya pada game atau area pahlawan yang menarik perhatian, mereka secara alami menarik pengguna dan membuat mereka tetap tertarik.
Dan kesenangan adalah fokus kami hari ini. Kami telah mengumpulkan delapan cuplikan kode menghibur yang dapat membantu membuat pengunjung situs Anda tersenyum. Mari kita mulai!
Globe yang Anda Cari oleh Ksenia Kondrashova
Bola dunia 3D interaktif ini menampilkan tampilan yang unik dan mencakup beberapa teknologi yang menarik. Anda tidak hanya dapat “memutarnya” melalui klik-dan-seret atau sentuh, tetapi juga titik plot. Klik untuk menambahkan titik, dan skrip akan menampilkan koordinat geografisnya.
Lihat Pena Globe yang Anda cari (Three.js + GLSL + GSAP) oleh Ksenia Kondrashova
3D Lowpoly Pyramid di CSS oleh S. Shahriar
Di sini kita memiliki kombinasi pemenang dari objek 3D dan seni poligon.
Seret piramida warna-warni untuk mengubah perspektifnya. Secara mengesankan, cuplikan ini sebagian besar didukung oleh CSS, dengan sedikit bantuan dari JavaScript.
Lihat Pena CSS 3D Lowpoly Pyramid (disederhanakan) oleh S. Shahriar
Tumbuhkan Animasi oleh YCW
Menonton campuran eklektik kehidupan tanaman “mekar” di layar itu menyenangkan. Tapi mulailah memutar objek 3D ini untuk efek yang benar-benar menakjubkan.
Presentasi dapat diputar 360° penuh dengan animasi yang sangat halus. Presentasi menggunakan kanvas HTML dan dapat berfungsi sebagai panduan untuk membuat demo produk interaktif.
Lihat Pena 124. menumbuhkan hewan oleh ycw
Menciptakan “Keyboard Minimal” oleh Dibyajyoti Mishra oleh Jacob Foster
Ada lebih dari keyboard virtual ini daripada yang terlihat. Ini tidak hanya terlihat luar biasa, tetapi juga sepenuhnya interaktif.
Pastikan browser Anda fokus pada presentasi, dan keyboard akan meniru pengetikan Anda. Tekan tombol berwarna di sebelah kanan untuk menyalakan efek animasi yang menyenangkan.
Lihat Pena Membuat ulang “Keyboard minimal” oleh Dibyajyoti Mishra oleh Jacob Foster
150ml Vanila CSS oleh Paulo Nunes
Inilah bukti bahwa Anda tidak memerlukan animasi mewah untuk membuat elemen 3D yang menyenangkan.
Paket virtual ini dibuat dengan CSS dan memanfaatkan box-shadow dan transform properti untuk menciptakan perspektif. Fakta bahwa ia menggunakan teks daripada gambar untuk pelabelan adalah keajaiban pengkodean modern dalam dirinya sendiri.
Lihat Pena 150ml vanila CSS oleh Paulo Nunes
Melambung oleh Louis Hoebregts
Ada beberapa fisika serius yang dimainkan dengan bola memantul yang menyenangkan ini. Sactionkan saat mereka jatuh ke platform 3D yang berputar dan meledak saat terkena benturan.
Poin bonus untuk efek visual seperti komik setelah setiap bola mencapai akhir perjalanannya.
Lihat Pena Tantangan CodePen – Pantulan oleh Louis Hoebregts
Beralih 3D oleh Adir
Sakelar sakelar membuat tambahan yang bagus untuk formulir. Mereka sangat sederhana dan menawarkan alternatif yang lebih menarik untuk satu set tombol radio “Ya/Tidak”.
Namun cuplikan ini membawanya ke level yang sama sekali baru, lengkap dengan bola 3D dan beberapa transisi animasi yang keren. Itu tidak akan keluar dari tempatnya di dasbor akun pengguna.
Lihat Pena Beralih 3D oleh Adir
CSS Hanya Efek Gambar 3D oleh Temani Afif
Apakah Anda mencari cara untuk membumbui gambar biasa? Efek CSS murni ini menawarkan pengalaman visual yang menarik.
Setiap gambar menampilkan perspektif 3D sambil mengarahkan “meratakan” tampilan dan mengungkapkan judul. Tidak diperlukan kerangka kerja yang berat untuk menambahkan elemen kesenangan.
Lihat Pena CSS hanya gambar efek 3D oleh Temani Afif
Elemen 3D yang Melompat dari Layar
Ketika Anda memikirkannya, semua yang diperlukan untuk membuat elemen 3D dasar di situs web Anda adalah sedikit CSS. Itu hanya menunjukkan seberapa jauh bahasa telah berkembang selama bertahun-tahun.
Tetapi CSS hanyalah titik awal. Menambahkan JavaScript, termasuk kerangka kerja seperti GSAP, dapat memberikan hasil tingkat profesional. Beberapa cuplikan di atas adalah contoh cemerlang dari apa yang dapat dicapai. Dimensi ketiga tidak pernah dalam jangkauan yang lebih dekat untuk pengembang.
Ingin melihat cara yang lebih menyenangkan dan kreatif untuk mengintegrasikan 3D ke dalam proyek Anda? Pergilah ke kami Koleksi CodePen untuk melanjutkan perjalanan Anda.
