Bagaimana untuk Mencapai Kesan Flipping Kad 3D Hanya Menggunakan CSS?

Cara Membalikkan Kad 3D dengan CSS

Tugasnya ialah untuk mencipta kesan membalikkan kad 3D menggunakan CSS sahaja, di mana kad terbalik menegak pada tuding.

Kesan Flip CSS Sahaja

Untuk memudahkan pelaksanaan, kami akan menggunakan kod CSS berikut:

<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

Bekas kad mempunyai perspektif yang digunakan padanya, memberikannya ilusi ruang 3D. Kedua-dua muka depan dan belakang diletakkan secara mutlak dalam bekas. Mereka juga diubah untuk menyembunyikan muka belakang mereka dan mengekalkan sifat 3D mereka.

Apabila tetikus melayang di atas kad, transformasi berikut berlaku:

• Muka depan berputar 180 darjah di sekeliling paksi Y, mendedahkan muka belakang.
• Muka belakang berputar 360 darjah mengelilingi paksi Y, melengkapkan flip.

Teknik CSS sahaja ini membolehkan kelancaran dan realistik Kesan membalikkan kad 3D pada tuding.

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