Kesan Parallax Hover Menggunakan TailwindCSS

Pernahkah anda terpesona dengan kesan lekukan paralaks 3D yang menakjubkan pada kad? Mereka kelihatan kompleks, bukan? Nah, saya juga fikir begitu, sehingga saya menemui demo CodePen ringkas yang menunjukkan betapa mudahnya untuk mencipta satu. Adakah anda ingin mempelajarinya juga? Mari selami-

Beberapa asas

Untuk mencapai kesan 3D, kita perlu mengetahui beberapa perkara dahulu. Itu ialah-

• Perspektif: Sifat perspektif mengawal sejauh mana objek kelihatan daripada pemapar. Nilai yang lebih rendah menghasilkan kesan 3D yang lebih kuat dan dramatik, manakala nilai yang lebih tinggi menjadikan kesannya lebih halus.
• Ubah: Sifat transformasi membolehkan anda menggunakan perubahan 2D atau 3D pada elemen. Anda boleh menggunakannya untuk memutar, menskalakan, menggerakkan, menyerong dan banyak lagi!

Mari beralih kepada kod

Semak keputusan akhir dahulu, supaya anda akan faham apa yang kami cuba bina. Tuding pada kad dan lihat rupanya?

Sekarang, mari lihat cara ia berfungsi. Saya tidak akan menerangkan setiap kelas TailwindCSS di sini. Kami hanya akan membincangkan tentang kelas utama yang melakukan kesannya. Mula-mula, mari lihat kelas div kad utama-

<div>



<p>Look at this part here-<br>
</p>

<pre class="brush:php;toolbar:false">[transform:perspective(800px)_rotateY(10deg)] hover:[transform:perspective(800px)_rotateY(-10deg)]

Kami melakukan dua perkara di sini. Pada mulanya, kami sedang memutar kad dengan paksi Y sebanyak 10 darjah. Dan, juga menetapkan perspektif kepada 800px. Akibatnya, keadaan normal kad kelihatan seperti imej di bawah. Ia dipusingkan sedikit ke kanan. Dan, kerana kami telah menggunakan beberapa perspektif, anda dapat melihat bahawa bahagian kanan kad agak condong. Begitulah cara dunia 3D sebenar berfungsi!

Kami boleh mengubah suai perspektif untuk melihat perubahan dalam kad. Dan, anda juga akan mendapat idea bagaimana perspektif berfungsi-

Beginilah rupanya jika kita menukar perspektif kepada 100px. Semakin kita menurunkan nilai perspektif, semakin dekat kandungannya - ingat?

Dan, inilah yang kita dapat jika kita menetapkan perspektif kepada 10000px. Sejauh ini seolah-olah tiada putaran langsung!

Sekarang, kita akan melihat bagaimana ia mempunyai ilusi 3D apabila kita menudingnya. Dan, anda akan terkejut apabila melihat bahawa sangat mudah untuk menipu mata kita!

Lihat bahagian kod img-
ini

<img>



<p>Apabila melayang di atas kad, imej meluncur 2.5rem ke kiri, menghasilkan kesan dinamik. Untuk ini, kami menggunakan pengubah Kumpulan TailwindCSS. Dan, itu sahaja! Kami akan mempunyai kad berputar imej 3D.</p>

<p>Kini giliran anda! Eksperimen dengan kelas ini, ubah suai perspektif atau gabungkan kesan ini dengan utiliti TailwindCSS yang lain untuk mencipta sesuatu yang unik. Jangan lupa kongsi ciptaan anda dalam komen atau di media sosial!</p>

<p>Anda juga boleh mencari saya di sini- </p>

• X
• LinkedIn

Atas ialah kandungan terperinci Kesan Parallax Hover Menggunakan TailwindCSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!