CSS dalam 3D: Belajar berfikir dalam kiub dan bukan kotak

Perjalanan saya ke CSS bukanlah kisah pemaju front-end biasa anda. Saya bermula sebagai pengaturcara Java, pengalaman CSS awal saya terhad kepada pemilihan warna dalam Visual Studio.

Semangat saya untuk pembangunan front-end, dan seterusnya CSS, dinyalakan kemudian, bertepatan dengan kebangkitan CSS3. Daya tarikan 3D dan animasi menawan saya, membentuk pemahaman saya tentang CSS lebih mendalam daripada susun atur atau teori warna.

Setelah menghabiskan banyak masa membuat kesan CSS 3D, saya telah menapis aliran kerja saya. Artikel ini berkongsi pendekatan saya sekarang, menawarkan petua dan cara untuk meningkatkan kemahiran CSS 3D anda.

The Cuboid: Blok Bangunan Asas Anda

Bagi kebanyakan ciptaan 3D, cuboid berfungsi sebagai elemen utama. Walaupun bentuk yang lebih kompleks dapat dicapai, mereka memerlukan perhatian yang lebih besar terhadap perincian. Lengkung, khususnya, cabaran sekarang, walaupun teknik wujud untuk menangani mereka (dibincangkan kemudian).

Membuat cuboid asas tidak dilindungi di sini; Rujuk kepada jawatan yang sangat baik Ana Tudor atau screencast ini untuk panduan. Pada asasnya, elemen induk merangkumi cuboid, yang mengandungi enam elemen kanak -kanak yang mewakili wajahnya. Secara kritikal, transform-style: preserve-3d; mesti diterapkan, idealnya di seluruh dunia:

 * {Transform-style: Preserve-3D; }

Untuk model 3D yang rumit, gambarkan keseluruhan adegan sebagai perhimpunan cuboids. Pertimbangkan buku 3D: Empat cuboid -satu untuk setiap penutup, satu untuk tulang belakang, dan satu untuk halaman -dengan imej latar belakang menambah sentuhan penamat.

Pembinaan Pemandangan: Menubuhkan Yayasan

Fikirkan kekaisaran sebagai batu bata LEGO. Memudahkan proses melibatkan mewujudkan elemen "pesawat" -permukaan asas di mana model 3D anda terletak. Ini memudahkan putaran dan pergerakan.

Pendekatan pilihan saya bermula dengan berputar satah di sepanjang paksi x dan y, kemudian meratakannya dengan rotateX(90deg) . Seterusnya, menambah cuboid baru melibatkan meletakkannya dalam elemen pesawat, menggunakan position: absolute untuk kedudukan yang tepat.

 .plane {
  Transform: RotateX (calc (var (-rotate-x, -24) * 1deg)) rotatey (calc (var (-rotate-y, -24) * 1deg)) rotatex (90deg) translate3d (0, 0, 0);
}

Meluruskan pembangunan dengan boilerplate dan pug

Sifat berulang mewujudkan banyak cuboid memerlukan pendekatan yang diselaraskan. Saya memanfaatkan PUG, enjin templat, untuk menghasilkan struktur cuboid melalui mixin. (Pengenalan Pug cepat tersedia jika diperlukan.)

Struktur adegan biasa menggunakan PUG mungkin kelihatan seperti ini:

 Mixin Cuboid (nama kelas)
  .cuboid (class = className)
    // enam elemen div untuk setiap wajah cuboid ...

CSS yang sepadan untuk kelas cuboid saya ialah:

 .cuboid {
  // ... (CSS untuk gaya cuboid) ...
}

... (peraturan CSS untuk setiap wajah cuboid) ...

Memanfaatkan kekuatan pembolehubah CSS

Penggunaan luas pembolehubah CSS (sifat tersuai) meningkatkan kecekapan. Tudung saya didorong oleh pembolehubah:

• --width : Lebar Cuboid di Pesawat
• --height : ketinggian cuboid di atas kapal terbang
• --depth : kedalaman cuboid
• --x : kedudukan x di atas kapal terbang
• --y : kedudukan y di atas kapal terbang

vmin digunakan terutamanya untuk saiz responsif. Pesawat itu diletakkan rata, membolehkan ketinggian intuitif, lebar, dan rujukan kedalaman.

Debugging dengan dat.gui: Kawalan dan pemeriksaan masa nyata

Perpustakaan Dat.Gui yang berguna memudahkan debugging masa nyata. Ia membolehkan pengubahsuaian pembolehubah CSS semasa runtime, membolehkan pelarasan mudah untuk putaran, kedudukan, dan dimensi. Putar pesawat menggunakan Dat.gui AIDS dalam menggambarkan hubungan spatial.

Pusat dan kedudukan: ketepatan dan organisasi

Setiap tongkat sengaja berpusat, dengan separuh di atas dan separuh di bawah pesawat. Ini memudahkan animasi, terutamanya putaran paksi z. Untuk adegan yang kompleks, sub-pesawat meningkatkan organisasi, membolehkan manipulasi bebas bahagian.

Estetika: Penambahbaikan dan Rayuan Visual

Selepas penyelesaian struktur, fokus beralih kepada estetika. Penggunaan konsisten pembolehubah CSS untuk warna dan warna meningkatkan keharmonian visual. Imej latar belakang dan elemen pseudo menambah butiran dan tekstur. Penapis, seperti brightness() , boleh menyesuaikan teduhan secara terang -terangan.

Ilusi kedalaman: Teknik Asap dan Cermin

Kadang -kadang, kesan 3D "Faux" mewujudkan kedalaman yang meyakinkan dengan unsur -unsur yang lebih sedikit. Unsur -unsur rata, kedudukan strategik dan diputar, boleh meniru bentuk 3D.

Menangani bentuk yang tidak teratur: penyelesaian masalah kreatif

Bentuk yang tidak teratur memerlukan penyelesaian kes demi kes. Poligon boleh menghampiri lengkung, manakala helah perspektif boleh mewujudkan ilusi kedalaman.

Z-perlawanan: Menyelesaikan konflik elemen bertindih

Z Melawan, di mana unsur-unsur bertindih berkedip, ditangani oleh perintah DOM yang teliti dan offset kedudukan yang sedikit untuk mencegah konflik.

Kesimpulan: Mulakan perjalanan CSS 3D anda

Merangkul cabaran CSS 3D, bereksperimen dengan teknik yang berbeza, dan kongsi ciptaan anda. Ingat, kesabaran dan kreativiti adalah bahan -bahan utama dalam usaha ini.

Atas ialah kandungan terperinci CSS dalam 3D: Belajar berfikir dalam kiub dan bukan kotak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!