Kandungan
- Bermula
- Membuat pangkalan pusing putar
- Menciptakan kaki
- Lengan dan kepala
- Warna dan tekstur
- Membuat dan mengeksport
- Menamatkan logo
- Animasikan logo
Terdapat beberapa cara untuk membuat animasi 3D di web, yang kebanyakannya memerlukan pengetahuan yang baik tentang JavaScript dan WebGL, atau penggunaan plug-in seperti Flash. Terima kasih kepada transformasi 3D CSS, mungkin membuat 3D hanya menggunakan HTML dan CSS, tetapi tidak mudah untuk melakukannya. Tridiv, aplikasi dalam talian percuma saya, mempermudah prosesnya, menawarkan antara muka WYSIWYG yang ringkas dan intuitif yang membolehkan pengguna membuat objek 3D tanpa menulis satu baris kod.
Dalam tutorial ini, kita akan membuat dan menghidupkan logo untuk 'Tridiv Records', label rakaman fiksyen, hanya menggunakan HTML dan CSS. Visual utama untuk logo akan dibuat dalam bentuk 3D menggunakan Tridiv. Kemudian kita akan menambahkan elemen tipografi menggunakan HTML dan CSS biasa.
Anda dapat melihat animasi terakhir dan kod yang menghasilkannya di sini.
Bermula
Kita akan bermula dengan membuat meja putar dalam bentuk 3D menggunakan Tridiv. Pergi ke tridiv.com dan lancarkan aplikasi. Anda mesti menggunakan Chrome, Safari, atau Opera 15 (atau lebih baru).
Sebelum memulakan, penting untuk memahami antara muka Tridiv. Bahagian utama editor terdiri daripada empat paparan: di sebelah kiri atas adalah paparan 3D, memberikan pemandangan pemandangan yang lengkap. Tiga pandangan yang lain menunjukkannya dari atas, sisi dan depan. Dengan menggunakan tiga paparan ini, anda boleh membuat, mengedit dan memindahkan bentuk 3D.
Bar alat mendatar dibahagikan kepada dua bahagian: bahagian kiri memaparkan maklumat yang berkaitan dengan dokumen anda; bahagian kanan mengandungi alat untuk membuat dan menyunting bentuk. The Bergerak pemilihan dan Edit butang pilihan beralih antara mod penyuntingan yang berbeza.
Panel sifat (bar sisi) memaparkan tetapan dokumen seperti zoom dan snap ke grid, dan sifat bentuk yang dipilih (ukuran, kedudukan, putaran, warna, dan sebagainya). Unit yang digunakan untuk dimensi dan kedudukan adalah ems; sudut putaran adalah dalam darjah.
Untuk mengelakkan kekeliruan di tutorial nanti, kami akan menggunakan singkatan berikut:
w = lebar h = tinggi d = diameter kedalaman = diameter x deg = putaran pada paksi-x y deg = putaran pada paksi-y z deg = putaran pada paksi-z
Membuat pangkalan pusing putar
Mulailah dengan menetapkan nilai zoom ke 200. Untuk membantu menarik bentuk, aktifkan tetapan snap ke grid di Tetapan Dokumen bahagian bar sisi. Tetapkan nilai snap ke 0.125.
Asas meja putar terdiri daripada kuboid sederhana, jadi klik Masukkan kuboid butang di bar alat atas. Anda mesti melihat kuboid itu muncul dalam keempat paparan dalam penyunting.
Namakan semula bentuk menjadi pangkalan menggunakan bidang nama panel sifat (bawah Sifat Bentuk). Nama bentuk mestilah nama kelas CSS yang sah kerana ia akan digunakan dalam kod yang dihasilkan oleh editor. Kami akan menggunakan nama kelas ini kemudian ketika menghidupkan logo, jadi pastikan bahawa anda menamakan setiap bentuk baru yang anda buat dengan betul.
Setelah kuboid diberi nama, pastikan ia dipilih di paparan atas (harus diserlahkan dengan warna biru, dengan cincin alat bulat di sekelilingnya), kemudian klik Edit butang di bahagian atas gelang untuk menunjukkan pemegang edit. Seret pemegang kawalan di sisi kuboid, sehingga lebar dan kedalaman dapat dicapai w = 10 dan d = 8 di dalam Sifat Bentuk.
Klik pada bentuk dalam pandangan sisi. Ini akan menunjukkan pegangan penyuntingan dalam paparan ini, yang memungkinkan kita mengubah ketinggiannya. Selaraskan ketinggian sehingga mencapai h = 2. Anda juga boleh menaip nilai terus ke panel sifat. Untuk membulatkan sudut kuboid, ubah nilai sudut di panel sifat menjadi 1.75, kemudian tekan [Masukkan] kunci untuk menerapkan perubahan. Anda akan mempunyai sesuatu seperti ini
Menciptakan kaki
Untuk kaki pusing, kita akan menggunakan silinder. Tambahkan silinder, kemudian ubah diameternya menjadi diam = 1.75 dan ketinggiannya hingga h = 0.5. Klik pada Bergerak butang pilihan di bar alat atas untuk menunjukkan kawasan yang boleh diseret pada bentuk. Gerakkan silinder di bawah pangkalan, letakkan di salah satu sudut. (Anda mungkin perlu memindahkannya ke pandangan atas, sisi dan depan.)
Gandakan silinder (tekan Gandakan butang pada cincin bulatan alat, atau tekan D kunci) dan untuk memindahkan silinder baru ke sudut pangkalan yang lain. Ulangi proses sehingga keempat-empat kaki diletakkan dengan betul. Jangan lupa menamakan silinder (contohnya, kaki kiri-atas, kaki kanan-atas, kaki-kiri-bawah, kaki kiri-atas). Apabila anda berjaya melakukannya, hasilnya akan kelihatan seperti ini.
Kita sekarang akan membuat piring, cakera, paksi lengan dan butang. Proses untuk membuat bentuk seterusnya adalah serupa dengan kaki. Berikut adalah dimensi yang digunakan untuk silinder yang berbeza:
pinggan: diam = 7; h = 0,5 cakera: diam = 6.75; h = 0,25 butang: diam = 1.5; h = 0,25 lengan-paksi-asas: diam = 2.25; h = 0,25 paksi lengan: diam = 1.375; h = 1
Untuk menyempurnakan sisi silinder, anda boleh menambah bilangan muka pada setiap silinder, menggunakan medan sisi di panel sifat. Jangan tambahkan terlalu banyak sisi kerana ini boleh mempengaruhi prestasi global editor dan animasi akhir secara negatif. Dalam kes ini, saya menasihati anda agar tidak menggunakan lebih dari 32 sisi untuk piring dan cakera. Anda mesti mempunyai sesuatu seperti ini.
Lengan dan kepala
Untuk lengan dan kepala piring putar, kita akan menggunakan kuboid. Untuk lengan, buat kuboid (w = 0.25; h = 0.25; d = 4, kemudian gunakan putaran -33° pada paksi-y. Untuk kepala, buat kuboid (w = 0.5; h = 0.5; d = 1, kemudian gunakan putaran -33° pada paksi-y. Sejajarkan kedua-dua bentuk dengan silinder paksi lengan. Hasilnya mesti kelihatan seperti ini.
Warna dan tekstur
Kami hampir selesai dengan pusing putar. Langkah terakhir adalah menetapkan warna dan menerapkan tekstur pada vinil (gambar yang mewakili permukaan rakaman). Untuk menetapkan warna, pilih bentuk dan klik pada warna medan di panel sifat. Tridiv membolehkan anda menentukan warna individu untuk setiap wajah bentuk, tetapi, dalam contoh ini, kita perlu menggunakan semua bidang untuk mengubah warna semua wajah. Untuk melakukan ini, masukkan kod warna hex di lapangan, kemudian sahkan dengan menekan Masukkan.
Berikut adalah warna yang digunakan dalam contoh ini:
asas: # 0099FF kaki, butang, paksi, lengan dan kepala: # F2EEE5 cakera: # fa7f7a
Untuk tekstur vinil, prosesnya serupa dengan menetapkan warna. Pilih silinder cakera, kemudian klik pada gambar medan di panel sifat. Tampal URL gambar yang ingin anda gunakan pada vinil di bahagian atas dan sahkan dengan menekan Masukkan. Anda boleh menggunakan gambar anda sendiri, atau memuat turun gambar yang digunakan dalam contoh ini.
Anda sekarang harus mempunyai sesuatu yang kelihatan seperti ini.
Membuat dan mengeksport
Setelah pusing putar selesai, kita akan berusaha dengan cara ia dihasilkan sebelum mengeksportnya. Klik Pratonton butang di bahagian atas panel sifat. Tetapkan nilai zoom ke 200 untuk memaparkan pusing putar lebih besar. Untuk menghilangkan sempadan hitam bentuk, pergi ke Sempadan bahagian panel dan tetapkan kelegapan ke 0. Hasilnya mesti kelihatan seperti ini.
Kami mahu meja putar dinyalakan dari atas. Untuk melakukan ini, putar pemandangan sedemikian rupa sehingga bahagian atas meja pusing menghadap anda. Pangkalannya mestilah kelihatan segi empat tepat. Mengubah nilai cahaya dan gelap di bahagian tridiv.com/d/4k6 sifat akan membentuk semula bayang-bayang di tempat kejadian. Tukar nilai cahaya menjadi 0.
Meja putar kini siap dieksport!
Menamatkan logo
Kami siap menambahkan teks ke logo dan membuat animasi logo. Klik Edit pada butang CodePen di kiri bawah Pratonton paparan untuk mengeksport kod ke CodePen. Penting untuk diperhatikan bahawa kod CSS yang dihasilkan oleh Tridiv tidak menggunakan awalan vendor, jadi anda perlu menggunakan alat seperti prefixr.com atau leaverou.github.io/prefixfree untuk menjadikan kod berfungsi di setiap penyemak imbas. Mulakan dengan menutup panel JavaScript, kerana kita tidak akan menggunakannya. Di panel HTML, hapus tanda gaya yang digunakan pada .cucian div.
Luaskan panel CSS dan tambahkan kod berikut di akhir:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Di sini, translateY (-140px) menggerakkan pusing putar 140 pik ke atas, meninggalkan ruang untuk teks di bawahnya. Kemudian, putarX (-55deg) menetapkan kecenderungan menegak pusing putar.
Untuk menambahkan teks, anda perlu menambah a .tajuk div tepat selepas pembukaan #tridiv div di panel HTML. Di dalam, tambah dua merangkumi> (.main-title dan .sub-title), dipisahkan oleh jam />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> REKOD / span> / div>…
Anda kemudian perlu menerapkan fon dan gaya yang betul. Di panel CSS, import fon Open Sans yang digunakan dalam logo, dan tambahkan gaya asas untuk elemen teks.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Pemusatan blok teks + gaya fon asas * / tajuk {kedudukan: mutlak; atas: 50%; kiri: 50%; margin: 0 0 0 -165 piksel; lebar: 330 piksel; tinggi: 5em; font-family: 'Open Sans', sans-serif; berat huruf: 300; saiz fon: 24px; text-align: tengah; jarak huruf: 1.5em; warna: # 0099FF; } tajuk hr {sempadan: 1px padat # fa7f7a; margin: .75em 0; } rentang tajuk {paparan: blok; } .main-title {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! Logo anda lengkap. Sepertinya gambar seperti di bawah. Setelah model 3D anda selesai, anda dapat menggunakan kekuatan CSS untuk menjadikannya lebih baik dengan menambahkan gaya, animasi atau acara tetikus: perlakukan model 3D seperti elemen HTML yang lain.
Animasikan logo
Lihat animasi menggunakan logo di sini. Oleh kerana bahagian-bahagian meja putar 'jatuh', masing-masing berkongsi animasi bingkai utama yang sama dengan kelewatan yang berbeza. Bentuknya mempunyai atribut teratas 50%. Untuk mencipta kesan jatuh, kami menghidupkan atribut teratas dari -400 piksel ke 50%:
@keyframes jatuh {0% {atas: -400px; } / * Kami memulakan animasi dengan meletakkan bentuk hingga ketinggian 400px * / 100% {atas: 50%; } / * maka kami mengakhirinya pada kedudukan asalnya * /}
Anda dapat menambahkan animasi ini ke semua bentuk, seperti berikut:
.bentuk {atas: -400px; animasi: 1s jatuh 0s ke hadapan; }
Tetapkan atribut teratas ke -400 piksel dan tambahkan kelewatan:
.platter {animation-delay: 1.05s; } .disc {animation-delay: 1.35s; } .tombol {animation-delay: 1.5s; } ...
Buat kesan 'lantunan' akhir menggunakan putarX atribut:
90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Begitulah cara kami membuat versi khusus ini, tetapi ingat: tidak ada had!
Perkataan: Julian Garnier
Artikel ini mula-mula muncul dalam majalah net terbitan 248.
