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

Giới thiệu

Hiệu ứng Rotate Out Up Right làm phần tử xoay quanh góc dưới bên phải (right bottom) từ 0° đến +90° đồng thời mờ dần từ hiển thị đến ẩn. Phần tử xoay "ngửa ra sau" và biến mất.

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

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

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

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

Phân tích

Tương quan với các hiệu ứng Rotate Out khác

Ứng dụng

• Đóng modal/popup từ góc phải
• Notification slide out
• Card flip out animation
• Page transition (kết hợp với JS)

Mẹo: Kích hoạt bằng class toggle (JS)

<style>
  .toast { animation: slideIn 0.3s ease-out; }
  .toast.removing { animation: rotateOutUpRight 0.5s ease-in forwards; }
</style>

<script>
  function removeToast(el) {
    el.classList.add('removing');
    el.addEventListener('animationend', () => el.remove(), { once: true });
  }
</script>