Kartu Flip 3D

Ini adalah komponen UI kartu flip yang memiliki efek berputar dalam ruang 3D. Melayang akan membalik kartu untuk menampilkan konten di bagian belakang.

Pratinjau

Front Side

Hover me to flip

Back Side

This is the back of the card

Kode

<div class="flip-card-container">
<div class="flip-card">
  <div class="flip-card-front">
    <div class="card-content">
      <h3>Front Side</h3>
      <p>Hover me to flip</p>
    </div>
  </div>
  <div class="flip-card-back">
    <div class="card-content">
      <h3>Back Side</h3>
      <p>This is the back of the card</p>
    </div>
  </div>
</div>
</div>

.flip-card-container {
/* Atur kedalaman ruang 3D */
perspective: 1000px;
width: 300px;
height: 400px;
}

.flip-card {
width: 100%;
height: 100%;
position: relative;
/* Animasi rotasi halus */
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* Menerapkan transformasi 3D ke elemen turunan */
transform-style: preserve-3d;
cursor: pointer;
}

/* Memutar 180 derajat pada sumbu Y saat melayang */
.flip-card-container:hover .flip-card {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
width: 100%;
height: 100%;
position: absolute;
/* Hide element when flipped */
backface-visibility: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
background: white;
color: #333;
}

/* Rotate back element 180 degrees initially */
.flip-card-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #6366f1, #a855f7);
color: white;
}

.card-content h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}

.card-content p {
margin: 0;
font-size: 1rem;
opacity: 0.9;
}