Bagaimana untuk Membalikkan Kad 3D Dengan Mudah Menggunakan CSS Tulen?

Terbalikkan Kad 3D dengan CSS, Dengan Mudah

Membalas kad dengan kesan 3D yang menarik perhatian boleh meningkatkan pengalaman pengguna. Dalam artikel ini, kita akan menyelidiki dalam mencipta animasi flip kad yang diaktifkan hover menggunakan CSS semata-mata.

Untuk bermula, mari lihat contoh kod yang memudahkan pelaksanaan sambil mengekalkan kesan yang dimaksudkan:

.kad {<br> kedudukan: relatif;<br> lebar: 50vh;<br> tinggi : 80vh;<br> perspektif: 500px;<br> jidar: 10vh auto 50vh;<br>}</p>
<p>.depan,<br>.belakang {<br> kedudukan: mutlak;<br> lebar: 100%;<br> ketinggian: 100%;<br> peralihan: ubah 1s;<br> kebolehlihatan belakang: tersembunyi;<br> gaya transformasi: preserve-3d;<br>}</p>
<p>. depan {<br> warna latar belakang: #66ccff;<br>}</p>
<p>.belakang {<br> warna latar belakang: #dd8800;<br> transform: rotateY(180deg);<br>}</p>
<p>.kad:legar .depan {<br> transform: rotateY(180deg);<br>}</p>
<p>.kad: hover .back {<br> transform: rotateY(360deg);<br>}

<div class="card"><br> <div class=" depan"><span>Depan</span></div><br> <div class="belakang"><span>Belakang</span></div><br>< /div>

Kod ini mencipta kad dengan dua muka: Depan dan Belakang. Kesan flip dicetuskan pada tuding. Melayang di atas kad akan menyebabkan Muka Depan berputar 180 darjah dan muka Belakang berputar 360 darjah.

Kunci kepada animasi ini terletak pada gabungan sifat CSS seperti perspektif, gaya transformasi, transformasi dan peralihan. Sifat ini berfungsi bersama-sama untuk mencipta ilusi objek 3D.

Dengan melaksanakan kod ini, anda kini boleh mencipta kesan flip kad 3D yang cantik dan menarik pada tapak web anda, meningkatkan daya tarikan visual dan interaksi pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Membalikkan Kad 3D Dengan Mudah Menggunakan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!