Bagaimana untuk Memutar Kad CSS 3D pada Hover Hanya Menggunakan CSS?

Kesan Kad 3D Boleh Flippable CSS pada Tuding

Dalam tutorial ini, kami menyasarkan untuk mencapai kesan flip kad 3D menggunakan CSS semata-mata. Kad akan berputar dengan lancar dari hadapan ke muka belakangnya apabila melayang di atasnya.

Pelaksanaan Kod:

<code class="css">.card {
  position: relative;
  width: 50vh;
  height: 80vh;
  perspective: 500px;
  margin: 10vh auto 50vh;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: #66ccff;
}

.back {
  background-color: #dd8800;
  transform: rotateY(180deg);
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(360deg);
}</code>

Penjelasan:

1. Kami mulakan dengan menentukan kelas kontena .kad dengan ketinggian, lebar dan perspektif yang diingini.
2. Di dalam bekas .kad, kami mencipta dua elemen anak: .depan dan .belakang untuk mewakili muka hadapan dan belakang kad.
3. Kami meletakkan kedua-dua .depan dan .belakang sepenuhnya dalam bekas .kad dan menetapkan dimensinya kepada 100% lebar dan tinggi.
4. Kami memohon peralihan kepada sifat transformasi kedua-dua elemen untuk membolehkan putaran lancar pada tuding.
5. Untuk mengelakkan kelipan semasa animasi flip, kami menetapkan keterlihatan muka belakang kepada tersembunyi dan gaya transformasi untuk mengekalkan-3d.
6. Pada mulanya, muka belakang diputar di sepanjang paksi Y sebanyak 180 darjah menggunakan transform: rotateY(180deg);.
7. Semasa tuding, kami memutarkan muka hadapan 180 darjah dan muka belakang 360 darjah untuk melengkapkan selak.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Kad CSS 3D pada Hover Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!