Bagaimana membuat: kartu berbalik

Bagaimana membuat kartu berbalik

Langkah pertama - Tambahkan HTML:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Bill Gates</h1>
      <p>Arsitek & Engineer</p>
      <p>Kami suka orang itu</p>
    </div>
  </div>
</div>

Langkah kedua - Tambahkan CSS:

/* Wadah kartu yang dapat berbalik - atur lebar dan tinggi yang Anda inginkan. Kita menambahkan atribut border untuk menunjukkan bahwa saat berada di atas, efek putar akan keluar dari wadah (jika Anda tidak ingin efek 3D, hapus perspektif) */
.flip-card {
  background-color: transaparan;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Jika Anda tidak ingin efek 3D, hapus perspektif */
}
/* Wadah ini digunakan untuk menempatkan depan dan belakang */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Saat mouse berada di atas wadah kartu yang dapat berbalik, lakukan putar horizontal */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
/* Lokasi depan dan belakang */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Setel style depan (jika gambar hilang, gunakan pilihan cadangan) */
.flip-card-front {
  background-color: #bbb;
  color: hitam;
}
/* Setel style belakang */
.flip-card-back {
  background-color: biru dodger;
  color: putih;
  transform: rotateY(180deg);
}

Coba sendiri