Tạo hiệu ứng xoay ra góc dưới phải (Rotate Out Down Right) với CSS

Giới thiệu

Hiệu ứng Rotate Out Down Right làm phần tử xoay quanh góc trên bên phải (right top — lưu ý: code gốc ghi right bottom nhưng rotate -90deg phù hợp với right top) từ 0° đến -90° đồng thời mờ dần. Phần tử "ngửa ra trước" về phía người xem 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 rotateOutDownRight {
      0% {
        -webkit-transform-origin: right top;
        -webkit-transform: rotate(0);
        opacity: 1;
      }
      100% {
        -webkit-transform-origin: right top;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
      }
    }

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

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

Lưu ý về transform-origin

Code gốc dùng right bottom nhưng rotate(-90deg) từ góc dưới phải sẽ xoay "ngửa ra sau" (giống Up Right). Để xoay "ngửa ra trước" (down), origin nên là right top. Ví dụ trên đã sửa.

Bản đồ 4 góc Rotate Out

Kết hợp: Slide + Rotate Out (Exit animation)

@keyframes exit-down-right {
  0% {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px) rotate(-90deg);
    opacity: 0;
  }
}

.toast.exit {
  animation: exit-down-right 0.4s ease-in forwards;
  transform-origin: right top;
}

Accessibility

@media (prefers-reduced-motion: reduce) {
  .rotateOutDownRight,
  .animated {
    animation-duration: 0.01ms !important;
  }
}