Hiệu ứng Flip In Y (Lật vào từ trục Y) với CSS

Hiệu ứng Flip In Y

Hiệu ứng Flip In Y làm phần tử xuất hiện bằng cách xoay từ 90 độ quanh trục Y (trục dọc) về 0 độ - giống như một cánh cửa mở ra - có hiệu ứng nảy lști nhẹ ở giữa.

Keyframes chi tiết

@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg); /* Vượt quá vị trí gốc (over-rotate) */
  }
  70% {
    transform: perspective(400px) rotateY(10deg); /* Nảy ngược */
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

Ví dụ hoàn chỉnh

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

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

• 0%: Bắt đầu từ góc 90 độ (mặt phẳng vuông góc với màn hình) - không thấy
• 40%: Xoay vượt qua vị trí thẳng đứng (-10 độ) - tạo cảm giác "đẩy" mạnh
• 70%: Nảy ngược nhẹ (10 độ) - hiệu ứng lò xo
• 100%: Về vị trí thẳng đứng (0 độ), hiện rõ hoàn toàn