Hiệu ứng Rotate In Down Left (Xoay vào góc dưới trái) với CSS

Hiệu ứng Rotate In Down Left

Hiệu ứng Rotate In Down Left 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-trái (left bottom)**. Đối xứng với rotateInDownRight.

Keyframes

@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;   /* Trục xoay: góc dưới-trái */
    transform: rotate(-90deg);       /* Xoay -90 độ */
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);            /* Về thẳng đứng */
    opacity: 1;
  }
}

Ví dụ hoàn chỉnh

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

Tổng kết họ Rotate In (5 biến thể)

/* Trung tâm */
@keyframes rotateIn { 
  0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; }
  100% { transform-origin: center center; transform: rotate(0); opacity: 1; }
}

/* 4 góc */
@keyframes rotateInDownLeft  { 0% { transform-origin: left bottom;  transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom;  transform: rotate(0); opacity: 1; } }
@keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg);  opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } }
@keyframes rotateInUpLeft    { 0% { transform-origin: left top;     transform: rotate(90deg);  opacity: 0; } 100% { transform-origin: left top;     transform: rotate(0); opacity: 1; } }
@keyframes rotateInUpRight   { 0% { transform-origin: right top;    transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right top;    transform: rotate(0); opacity: 1; } }