Hiệu ứng Rotate Out Down Left (Xoay ra góc dưới trái) với CSS

Hiệu ứng Rotate Out Down Left

Hiệu ứng Rotate Out Down Left làm phần tử xoay từ 0 độ đến 90 độ quanh **góc dưới-trái (left bottom)** rồi mờ dần biến mất. Giống như đóng một cánh cửa từ góc dưới-trái. Ngược lại với rotateInDownLeft.

Keyframes

@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);  /* Xoay 90 độ - nằm ngang */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: #E91E63;
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    @keyframes rotateOutDownLeft {
      0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; }
      100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; }
    }
    .rotateOutDownLeft { animation-name: rotateOutDownLeft; }
  </style>
</head>
<body>
  <div class="animated rotateOutDownLeft"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Lưu ý sửa lỗi HTML gốc

Code gốc có lỗi: </head> ở cuối thay vì </html>. Đã sửa trong ví dụ trên.

Họ hiệu ứng Rotate Out (4 góc + trung tâm)

Ứng dụng

• Đóng panel, modal, drawer từ các góc
• Xóa card/item với hiệu ứng "đóng lại"
• Transition trang (page transition) kiểu book flip