[Share Code] Tạo Hover Flip Card với viền động

Đây là một thẻ card với hiệu ứng lật mặt trước và mặt sau. Card hiển thị thông tin về một món ăn (Pizza) với phong cách thiết kế đẹp mắt, hiệu ứng chuyển động mượt mà.

Bạn có thể tải về bộ source Flip Card tại đây (Google Drive)

Cấu trúc HTML

<div class="card">: Đây là phần tử chính chứa toàn bộ nội dung của card.

Mặt trước (.front)

Chứa hình ảnh, nhãn FastFood, tên món ăn, và thời gian phục vụ.

Hiệu ứng floating cho các hình tròn trong nền.

Mặt sau (.back)

Hiển thị icon và tên món ăn khi lật card.

Hiệu ứng & Animation

Hiệu ứng lật card

Khi hover vào .card, phần .content quay 180 độ trên trục Y:

.card:hover .content {
    transform: rotateY(180deg);
}

Mặt trước (.front) bị xoay 180 độ sẵn để khi lật sẽ hiện ra đúng cách.

Hiệu ứng nền động (.circle)

Các vòng tròn nền có hiệu ứng mờ (blur) và chuyển động lên xuống (floating):

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(0px); }
}

Hiệu ứng quay (.back::before)

Dải màu gradient quay tròn để tạo hiệu ứng ánh sáng động:

@keyframes rotation_481 {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

Tóm lại

Giao diện đẹp, sử dụng hiệu ứng CSS hiện đại.

Card có độ bóng đổ tự nhiên tạo cảm giác 3D.

Hiệu ứng lật card giúp tăng trải nghiệm người dùng.