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

Hiệu ứng Flip In X

Hiệu ứng Flip In X làm phần tử xuất hiện bằng cách xoay từ 90 độ quanh trục X (trục ngang) về 0 độ - giống như một nắp hộp được mở ra từ trên xuống.

Keyframes

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg); /* Over-rotate */
  }
  70% {
    transform: perspective(400px) rotateX(10deg);  /* Spring back */
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

Ví dụ hoàn chỉnh

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

So sánh Flip In X vs Flip In Y