Card Lật 3D

Đây là thành phần UI thẻ lật có tác dụng xoay trong không gian 3D. Di chuột lật thẻ để lộ nội dung ở mặt sau.

Xem trước

Front Side

Hover me to flip

Back Side

This is the back of the card

Mã

<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 {
/* Đặt độ sâu của không gian 3D */
perspective: 1000px;
width: 300px;
height: 400px;
}

.flip-card {
width: 100%;
height: 100%;
position: relative;
/* Hoạt ảnh xoay mượt mà */
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* Áp dụng phép biến đổi 3D cho các phần tử con */
transform-style: preserve-3d;
cursor: pointer;
}

/* Xoay 180 độ quanh trục Y khi di chuột */
.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;
}