Hiệu ứng Flip Out X (Lật ngửa ra) với CSS

Hiệu ứng Flip Out X

Hiệu ứng Flip Out X làm phần tử xoay 90 độ quanh trục X (trục ngang) - giống như một tấm thẻ bị lật úp - đồng thời mờ dần biến mất. Hiệu ứng 3D rất đẹp mắt.

Keyframes với Perspective

@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateX(90deg); /* Lật ngửa 90 độ */
    opacity: 0;
  }
}

Thuộc tính quan trọng: backface-visibility

.flipOutX {
  animation-name: flipOutX;
  backface-visibility: visible !important; /* Đảm bảo thấy mặt sau khi lật */
}

backface-visibility: visible bắt buộc để thấy phần tử khi xoay quá 90 độ. !important ghi đè các quy tắc khác.

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: #673AB7;
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    @keyframes flipOutX {
      0% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
      100% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
    }
    .flipOutX {
      animation-name: flipOutX;
      backface-visibility: visible;
    }
  </style>
</head>
<body>
  <div class="animated flipOutX"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Các biến thể Flip

• flipInX - Lật ngửa vào (từ 90deg về 0)
• flipOutY / flipInY - Xoay quanh trục Y (dọc)
• flip - Xoay 360 độ đầy đủ