Hiệu ứng Flip (Lật 360 độ) với CSS

Hiệu ứng Flip (Full Flip)

Hiệu ứng Flip làm phần tử xoay 360 độ quanh trục Y với perspective, tạo cảm giác lật một tấm thẻ hoàn toàn. Kết hợp translateZ để tạo độ sâu, và animation-timing-function để điều khiển easing.

Keyframes phức tạp

@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in;
  }
}

Giải thích các giai đoạn

• 0-40%: Xoay từ 0→170deg, đồng thời translateZ(150px) đẩy ra phía trước (gần người xem) - ease-out
• 50%: Xoay tiếp 190deg (đã lật mặt sau), scale(1) - chuyển sang ease-in
• 80%: Hoàn thành 360deg, scale(0.95) thu nhỏ nhẹ
• 100%: Về scale(1) bình thường

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: linear-gradient(45deg, #667eea, #764ba2);
      animation-duration: 1.5s;
      animation-fill-mode: both;
    }
    @keyframes flip {
      0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; }
      40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; }
      50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; }
      80% { transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; }
      100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; }
    }
    .flip {
      animation-name: flip;
      backface-visibility: visible;
    }
  </style>
</head>
<body>
  <div class="animated flip"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Ứng dụng

• Card flip (thẻ bài, profile card)
• Loading animation độc đáo
• Transition giữa 2 trạng thái (front/back)