Hiệu ứng Rotate In Down Right (Xoay vào góc dưới phải) với CSS

Hiệu ứng Rotate In Down Right

Hiệu ứng Rotate In Down Right làm phần tử xuất hiện bằng cách xoay từ 90 độ về 0 độ, với **trục xoay ở góc dưới-phải (right bottom)**. Tạo cảm giác phần tử "mở ra" từ góc đó.

Keyframes

@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;  /* Trục xoay: góc dưới-phải */
    transform: rotate(90deg);        /* Xoay 90 độ (nằm ngang) */
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);            /* Xoay về thẳng đứng */
    opacity: 1;
  }
}

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: #9C27B0;
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    @keyframes rotateInDownRight {
      0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; }
      100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; }
    }
    .rotateInDownRight { animation-name: rotateInDownRight; }
  </style>
</head>
<body>
  <div class="animated rotateInDownRight"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Họ hiệu ứng Rotate In (4 góc)