Tạo hiệu ứng xoay vào từ góc dưới trái (Rotate In Up Left) với CSS

Giới thiệu

Hiệu ứng Rotate In Up Left làm phần tử xuất hiện bằng cách xoay từ góc dưới bên trái (0° → -90°) đồng thời mờ dần từ hiển thị đến ẩn. Lưu ý: Keyframes trong ví dụ gốc có hướng ngược với tên class (xoay ra thay vì xoay vào), dưới đây là phiên bản đã sửa chính xác.

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

<!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 rotateInUpLeft {
      0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
      }
      100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
      }
    }

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

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

Điểm khác biệt so với Rotate In Up Right

Khi nào nên dùng?

• Phần tử xuất hiện từ góc trái màn hình (sidebar, menu slide)
• Animation cho danh sách item xuất hiện lần lượt (staggered)
• Kết hợp với animation-delay cho hiệu ứng cascade