CSS rotate: hàm rotate(), thuộc tính rotate và quay tròn

Xoay một phần tử

Hai cách, cùng một kết quả: hàm rotate() bên trong transform, hoặc riêng thuộc tính rotate. Góc dương xoay theo chiều kim đồng hồ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

Hộp xanh dương và hộp xanh lá được xoay giống hệt nhau, 45 độ theo chiều kim đồng hồ quanh tâm của chúng. Hộp màu hổ phách có góc âm, nên nó nghiêng ngược chiều kim đồng hồ. Phép xoay không bao giờ dịch chuyển bố cục: mỗi hộp vẫn chiếm ô 90 x 60 ban đầu, vì vậy phần tử bị xoay có thể đè lên các phần tử bên cạnh.

Đơn vị góc

deg là lựa chọn thông dụng; turn dễ đọc khi quay tròn (rotate: 1turn). Góc lớn hơn 360 vẫn hợp lệ và có ý nghĩa trong animation: rotate(720deg) trong một keyframe sẽ quay hai vòng. Luôn viết đơn vị: rotate(45) không hợp lệ và bị bỏ qua.

Kéo thanh trượt để xem một góc ở từng đơn vị:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Xoay quanh một góc: transform-origin

Mặc định phần tử xoay quanh tâm của nó. transform-origin dời trục xoay đi. Kim đồng hồ xoay quanh đầu kim chứ không quanh điểm giữa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

Đầu dưới của kim nằm trên chốt màu hổ phách ở giữa mặt đồng hồ, và rotate: 120deg xoay kim chỉ đến 4 giờ. Bỏ dòng transform-origin thì kim sẽ xoay quanh điểm giữa của chính nó, lệch ra khỏi chốt.

Xoay chữ và nhãn dọc

Một độ nghiêng nhỏ bằng rotate là ổn cho nhãn hay sticker. Với một nhãn dọc thật sự, writing-mode tốt hơn, vì nó thay đổi bố cục: phần tử trở nên cao và hẹp thay vì đè lên phần bên cạnh.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

Phần kết quả cho thấy kích thước bố cục của từng nhãn. Nhãn bị xoay vẫn chiếm hộp rộng và thấp ban đầu: nó để lại khoảng trống bên cạnh và chòi ra phía trên và phía dưới hàng của nó, đè vào bất cứ thứ gì ở đó. Nhãn dùng writing-mode chiếm một hộp cao và hẹp. Thêm rotate: 180deg để nhãn đọc từ dưới lên trên, đó là hướng thường dùng cho nhãn dọc.

Xoay icon khi bấm hoặc rê chuột

Xoay mũi tên 180 độ là cách chuẩn để cho biết một phần đang mở. Kết hợp rotate với transition:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

Hình chữ V là một hình vuông có hai cạnh viền, xoay 45 độ để chỉ xuống. Khi nút được mở rộng, nó xoay đến 225 độ, chỉ lên trên, và transition tạo animation cho nửa vòng quay đó. Thuộc tính aria-expanded điều khiển style, nên trạng thái hiển thị và trạng thái mà trình đọc màn hình thông báo không bao giờ lệch nhau.

Biểu tượng loading quay tròn

Quay tròn là một phép xoay từ 0 đến 360 độ, lặp lại với timing linear để tốc độ không bao giờ thay đổi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

Chỉ với một keyframe to, animation bắt đầu từ góc xoay sẵn có của phần tử (không xoay) và kết thúc ở 360deg, còn infinite lặp lại nó mà không bị giật vì 360deg trông giống hệt 0. Với những người đã yêu cầu hệ thống giảm chuyển động, biểu tượng quay chậm hơn ba lần. Xem thêm về keyframe trong trang animation.

Xoay 3D: rotateX, rotateY

rotateX() lật phần tử ra sau quanh trục ngang, còn rotateY() xoay nó quanh trục dọc, giống như một cánh cửa. Không có phối cảnh thì chúng chỉ trông như bị ép dẹt; perspective trên phần tử cha tạo thêm chiều sâu:

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

Để lật gương một phần tử thay vì xoay nó, hãy dùng scale: -1 1 (lật ngang). Xoay 180 độ sẽ làm phần tử lộn ngược, và đó không phải là cùng một việc.

Lỗi thường gặp

• Xoay một <span> hoặc <a> mà nó vẫn đứng yên. Phần tử inline thuần túy bỏ qua transform. Hãy thêm display: inline-block.
• Góc xoay biến mất khi hover. Một quy tắc hover có transform: scale(1.1) sẽ thay thế transform: rotate(...). Hãy dùng riêng các thuộc tính rotate và scale, hoặc liệt kê cả hai hàm.
• Mong bố cục tự chừa chỗ. Ảnh bị xoay vẫn giữ hộp chưa xoay và đè lên các phần tử bên cạnh. Hãy cho phần tử chứa kích thước sau khi xoay, hoặc dùng writing-mode cho chữ.
• Biểu tượng quay dùng ease. Timing mặc định tăng tốc rồi giảm tốc ở mỗi vòng. Hãy dùng linear.
• Xoay quanh sai điểm. Hãy đặt transform-origin trước khi chỉnh góc.