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

Giới thiệu

Hiệu ứng Rotate In Up Right làm phần tử xuất hiện bằng cách xoay từ góc dưới bên phải (-90°) về vị trí gốc (0°) đồng thời hiện dần từ trong suốt đến hiển thị đầy đủ.

Ví dụ hoàn chỉnh

<!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: 10s;
      animation-duration: 10s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

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

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

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

Phân tích keyframes

Ứng dụng thực tế

Hiệu ứng này phù hợp cho:

• Hiện modal/popup từ góc màn hình
• Animation cho card khi scroll vào viewport
• Loading indicator kiểu "quay vào từ góc"

Mẹo: Giảm animation-duration xuống 0.5s-1s để hiệu ứng tự nhiên hơn.