Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Mengubah cara membuat tata letak yang isometrik dengan CSS 3D

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Kami menarik inspirasi untuk tutorial ini dari inisiatif terbaru Envato; Envato Elements. Homepage elemen memiliki berbagai produk-produk kreatif (Fonts, Icons, Graphic Templates dan sebagainya) menampilkan mereka bersama-sama pada tata letak kotak isometrik rapi.

the Elements homepage
Elemen homepage

Kita akan menciptakan lanskap ini isometrik menggunakan CSS 3D transformasi.

Isometric Projection

"Proyeksi isometrik" adalah metode (umum digunakan dalam teknik dan permainan di tahun 80-an dan 90-an mana kekuatan pemrosesan 3D adalah sangat terbatas) untuk menyajikan desain yang jelas tiga dimensi.

Beberapa objek yang dilihat dengan menggunakan proyeksi isometrik. Gambar oleh Wikipedia.

Ini bukan tiga dimensi karena kami mengalaminya dalam kehidupan nyata - bidang di mana mereka ditampilkan kurang memiliki perspektif.

Z-Axis

Selama bertahun-tahun, web telah menjadi lingkungan dua dimensi dan kita terbiasa memosisikan elemen sepanjang dua sumbu atau arah: sumbu x-axus (horizontal) dan y-axis (vertikal).

Catatan: sumbu y di web dibalik bertentangan dengan Cartesian coordinate principle, karena web adalah membaca atas ke bawah.

Sumbu ketiga, yaitu z-axis, diperlukan untuk proyek pandangan 3D. Sumbu ini merepresentasikan kedalaman, dan arah gerakan suatu objek sepanjang sumbu-z relatif terhadap sudut pandang kita; mungkin bergerak ke atas-bawah, atas-bawah, atau mendekati-jauh.

Tiga sumbu x, y dan z dalam 3D pesawat. Gambar oleh W3C.

Ini tiga sumbu dapat diterapkan ke fungsi mengubah CSS untuk membuat proyeksi 3D. Dalam demo berikut, kita menggunakan fungsi rotateX(), rotateY(), dan rotateZ() untuk membuat proyeksi isometrik persegi panjang:

Sekarang bahwa kita memiliki prinsip dasar yang mendasari proyeksi isometrik, kita dapat memasukkannya ke dalam praktek. Dan kita mulai dengan HTML.

HTML

Demikian pula ke homepage Envato elemen, kami memiliki tata letak kotak. Grid kami terdiri dari satu baris dengan sembilan kolom. Setiap kolom berisi gambar produk, link yang menunjuk ke halaman produk, dan seperti yang Anda lihat di bawah ini, span elemen yang akan kita gunakan untuk model gambar bayangan.

CSS

Kita mulai dimulai dengan baris dan kolom.

Gaya di atas set baris untuk display: flex, mengatur mengubah gaya 3D sehingga browser akan mematuhi transformasi paksi z dengan benar, memutar baris untuk menciptakan pandangan isometrik, dan akhirnya membagi kolom dalam baris ke dalam setengah.

Selanjutnya, kami menambahkan gaya ke .cover kelas, yang kami telah menambahkan tag anchor link produk, dan span elemen (segera untuk menjadi bayangan).

Memiliki gaya ini menambahkan, produk link serta span elemen sekarang peregangan semua jalan melintasi wadah. Kami juga mampu mengubah elemen tumpukan nanti.

Image Styles

Gaya berikut mengatur posisi elemen pembungkus gambar, padding dan beberapa hal 3D. Backface-visibility diatur sehingga kita tidak akan melihat melalui tumpukan di bawah elemen diterjemahkan atau dialihkan, dan tidak akan melihat wajah terbalik gambar.

Kami menerapkan transisi ke gambar dan bergerak melalui z-sumbu untuk membuatnya "levitate" di atas bayangan oleh 15px. Demikian pula, kita juga menambahkan beberapa hal 3D: backface-visibility dan transform-style, jadi ini akan membuat 3D melihat dengan benar.

Shadow Styles

Berikut memberikan kita gaya bayangan kita. Bayangan penyebaran harus sempit dan naungan bayangan gelap sejak gambar, pada titik ini, lebih dekat (oleh 15px) ke "floor" mana bayangan tercermin.

Kami telah membuat beberapa kemajuan:

Perhatikan sudut bulat dan bayangan penyebaran di bawah gambar.

Efek hover

Efek mengambang akan membuat setiap gambar thumbnail lebih menarik.

Di hover state, seperti yang ditunjukkan dalam potongan kode di atas, kita akan pertama bergerak elemen menumpuk lebih tinggi, sehingga gambar (dan link) akan muncul di atas sisa item dalam grid.

Kami juga akan mengangkat citra sedikit; bergerak menjauh dari "floor" dan sedikit lebih dekat dengan sumber "light". Ini dikatakan bayangan harus kehilangan beberapa kejelasan, jadi kami mengurangi opacity bayangan.

Item hover-state diangkat lebih tinggi dari yang lain dan sedikit berujung

Wrapping Up

Dalam tutorial ini, kami telah menggunakan 3D transformasi dalam CSS untuk membangun sebuah replika dari unsur-unsur Envato isometrik grid. Kita juga belajar bagaimana menambahkan realisme bayangan dan sumber cahaya. Lihatlah demo, ambil file sumber, dan biarkan kami tahu apa yang Anda lakukan dengan mereka!

3D transformasi adalah utilitas CSS yang kuat. Tetapi jangan menganggap mereka hanya tipu muslihat atau mainan untuk menambahkan lapisan mewah ke web. Jika diterapkan serius, unsur-unsur 3D juga dapat memecahkan beberapa masalah desain terkenal.

Sumber daya lainnya

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.