Hiệu ứng Rotate In (Xoay vào từ trung tâm) với CSS

Hiệu ứng Rotate In

Hiệu ứng Rotate In làm phần tử xuất hiện bằng cách xoay từ -200 độ về 0 độ quanh **trung tâm (center center)**, kết hợp fade in. Tạo cảm giác xoay tròn vào vị trí.

Keyframes

@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);  /* Xoay ngược 200 độ (hơn 1 vòng) */
    opacity: 0;
  }
  100% {
    transform-origin: center center;
    transform: rotate(0);        /* Về vị trí thẳng đứng */
    opacity: 1;
  }
}

Ví dụ hoàn chỉnh

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

Tùy chỉnh

• Góc xoay: Thay -200deg → -360deg (1 vòng tròn), -720deg (2 vòng)
• Trục xoay: Đổi transform-origin cho các biến thể góc (xem bài ID 1003062465)
• Kết hợp scale: transform: rotate(-200deg) scale(0.5); → xoay to nhỏ

So sánh với Rotate In Down Right