Cara Mencapai Pembalikan Kad 3D yang Lancar dengan CSS Tulen: Menyelesaikan Masalah Isu Sekejap

Terbalikkan Kad 3D dengan CSS Tulen

Masalah:

Percubaan untuk mencipta kesan flip kad 3D menggunakan CSS, tetapi kad itu tersentak dan bukannya terbalik dengan lancar pada tuding.

Kod Dicuba:

<code class="css">.card-container {
  // CSS code...
}</code>

Penyelesaian:

Untuk mencapai animasi flip kad 3D yang sempurna dengan hanya CSS, perkemas kod anda dan putar kad di sekeliling paksi Y. Berikut ialah contoh yang dioptimumkan:

CSS:

<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>

HTML:

<code class="html"><div class="card">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div></code>

Bagaimana caranya Berfungsi:

• Gaya transformasi: preserve-3d; harta benda memastikan elemen kad dipelihara dalam ruang 3D.
• keterlihatan belakang: tersembunyi; menyembunyikan muka belakang kad apabila diterbalikkan.
• Harta rotateY() membalikkan kad di sekeliling paksi Y, mewujudkan kesan flip.
• peralihan: mengubah 1s; memperkenalkan peralihan yang lancar semasa animasi flip.

Hasil:

Coretan kod ini menyediakan animasi flip kad 3D yang lancar menggunakan CSS tulen. Kad berputar dengan lancar dari muka depan ke muka belakang semasa tuding.

Atas ialah kandungan terperinci Cara Mencapai Pembalikan Kad 3D yang Lancar dengan CSS Tulen: Menyelesaikan Masalah Isu Sekejap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!