Tạo hiệu ứng xoay ra góc trên trái (Rotate Out Up Left) với CSS

Giới thiệu

Hiệu ứng Rotate Out Up Left làm phần tử xoay quanh góc dưới bên trái (left bottom) từ 0° đến -90° đồng thời mờ dần. Lưu ý: Code gốc có lỗi keyframes (dùng -transform thay vì transform) và class HTML sai (rotateOut thay vì rotateOutUpLeft). Đã sửa trong ví dụ dưới.

Ví dụ hoàn chỉnh (đã sửa lỗi)

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      background-image: url(/css/images/logo.png);
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    @-webkit-keyframes rotateOutUpLeft {
      0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
      }
      100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
      }
    }

    @keyframes rotateOutUpLeft {
      0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
      }
      100% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
      }
    }

    .rotateOutUpLeft {
      -webkit-animation-name: rotateOutUpLeft;
      animation-name: rotateOutUpLeft;
    }
  </style>
</head>
<body>
  <div id="animated-example" class="animated rotateOutUpLeft"></div>
  <button onclick="myFunction()">Tải lại trang</button>
  <script>
    function myFunction() { location.reload(); }
  </script>
</body>
</html>

Các lỗi trong code gốc đã sửa

• Keyframes @keyframes: Dòng -transform-origin và -transform sai cú pháp → sửa thành transform-origin và transform
• HTML class: class="animated rotateOut" → sửa thành class="animated rotateOutUpLeft"
• Duration: 10s → 1s (thực tế)

So sánh Rotate Out 4 góc

Rotate Out Up Left:    origin: left bottom   rotate:  0 → -90deg  (ngửa ra sau trái)
Rotate Out Up Right:   origin: right bottom  rotate:  0 →  90deg  (ngửa ra sau phải)
Rotate Out Down Left:  origin: left top      rotate:  0 →  90deg  (ngửa ra trước trái)
Rotate Out Down Right: origin: right top     rotate:  0 → -90deg  (ngửa ra trước phải)

Kết hợp với Animate.css (thư viện phổ biến)

<!-- CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<!-- Sử dụng -->
<div class="animate__animated animate__rotateOutUpLeft">Content</div>

Tự viết keyframes gọn hơn (modern)

@keyframes rotateOutUpLeft {
  from { transform-origin: left bottom; transform: rotate(0); opacity: 1; }
  to   { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; }
}

/* Hoặc dùng from/to thay vì 0%/100% */