Transform CSS: translate, scale, skew và transform-origin

transform làm gì

transform thay đổi cách một phần tử được vẽ ra: dịch chuyển, phóng to thu nhỏ, xoay hoặc làm nghiêng. Các đường viền nét đứt bên dưới cho thấy mỗi hộp sẽ nằm ở đâu nếu không có transform:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 30px 20px; }
    .slot { outline: 2px dashed #9ca3af; width: 90px; height: 60px; }
    .box { width: 90px; height: 60px; background: #2563eb; color: white; display: grid; place-items: center; }
    .t1 { transform: translate(20px, 10px); }
    .t2 { transform: scale(1.3); background: #16a34a; }
    .t3 { transform: rotate(20deg); background: #f59e0b; color: #111827; }
    .t4 { transform: skewX(-20deg); background: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="slot"><div class="box t1">translate</div></div>
    <div class="slot"><div class="box t2">scale</div></div>
    <div class="slot"><div class="box t3">rotate</div></div>
    <div class="slot"><div class="box t4">skewX</div></div>
  </div>
</body>
</html>

translate(20px, 10px) dịch hộp xanh dương đi 20px theo chiều ngang và 10px xuống dưới. scale(1.3) làm hộp xanh lá lớn hơn 30% quanh tâm của nó. rotate(20deg) xoay hộp màu hổ phách theo chiều kim đồng hồ, còn skewX(-20deg) làm nghiêng hộp màu tối. Trong mọi trường hợp, ô nét đứt, tức khoảng trống mà phần tử chiếm trong bố cục, vẫn nằm nguyên chỗ cũ.

Các hàm transform

Phần trăm trong translate() được tính theo kích thước của chính phần tử, không phải của phần tử cha. Phép xoay có trang riêng, với độ, vòng và hiệu ứng quay tròn: CSS rotate.

Thử nghiệm transform

Kéo các thanh trượt. Dòng đầu là giá trị transform bạn vừa tạo; dòng thứ hai là ma trận trình duyệt tính ra từ giá trị đó, cũng chính là thứ getComputedStyle trả về cho mọi transform:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 16px; }
    .stage { height: 170px; display: grid; place-items: center; background: #f3f4f6; margin: 10px 0; overflow: hidden; }
    #box { width: 80px; height: 80px; background: #2563eb; color: white; display: grid; place-items: center; border-radius: 6px; }
    code { display: block; }
  </style>
</head>
<body>
  <div class="controls">
    <label>translateX <input type="range" data-f="translateX" data-u="px" min="-120" max="120" value="0"></label>
    <label>scale <input type="range" data-f="scale" data-u="" min="0.5" max="1.8" step="0.1" value="1"></label>
    <label>rotate <input type="range" data-f="rotate" data-u="deg" min="-180" max="180" value="0"></label>
    <label>skewX <input type="range" data-f="skewX" data-u="deg" min="-40" max="40" value="0"></label>
  </div>
  <div class="stage"><div id="box">Box</div></div>
  <code id="value"></code>
  <code id="matrix"></code>
  <script>
    const box = document.getElementById('box');
    const inputs = document.querySelectorAll('input');
    const update = () => {
      const t = [...inputs].map((i) => i.dataset.f + '(' + i.value + i.dataset.u + ')').join(' ');
      box.style.transform = t;
      document.getElementById('value').textContent = 'transform: ' + t + ';';
      document.getElementById('matrix').textContent = 'computed: ' + getComputedStyle(box).transform;
    };
    inputs.forEach((i) => i.addEventListener('input', update));
    update();
  </script>
</body>
</html>

Transform không làm thay đổi bố cục

Phần tử được transform được vẽ ở chỗ khác, nhưng trang vẫn được dàn bố cục như thể nó chưa hề bị transform. Các phần tử lân cận giữ nguyên vị trí. Chính điều này khiến transform rất hợp cho hiệu ứng hover và animation: không có gì xung quanh phải tính lại bố cục.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No reflow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 10px; padding: 24px 10px; }
    .row div { width: 80px; height: 50px; background: #e5e7eb; display: grid; place-items: center; }
    .row .grow-t { transform: scale(1.5); background: #16a34a; color: white; }
    .row .grow-w { width: 120px; height: 75px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row" id="a"><div>A</div><div class="grow-t">scale(1.5)</div><div id="c1">C</div></div>
  <div class="row" id="b"><div>A</div><div class="grow-w">width 120px</div><div id="c2">C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'C starts at x = ' + document.getElementById('c1').offsetLeft + 'px next to the scaled box, and at x = ' +
      document.getElementById('c2').offsetLeft + 'px next to the resized one.';
  </script>
</body>
</html>

Cả hai hộp ở giữa đều trông lớn gấp 1,5 lần. Hộp dùng scale đè lên các hộp bên cạnh và C đứng yên; hộp được làm lớn bằng width và height thì đẩy C ra xa thêm 40px.

Nhiều transform và thứ tự của chúng

Đặt nhiều hàm trong một transform, ngăn cách bằng dấu cách. Thứ tự sẽ làm thay đổi kết quả, vì khi đọc từ trái sang phải, mỗi hàm hoạt động trong hệ tọa độ mà các hàm trước để lại:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform order</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .stage { position: relative; height: 170px; background: #f3f4f6; }
    .box { position: absolute; top: 20px; left: 20px; width: 60px; height: 40px; opacity: 0.85; }
    .a { transform: translateX(120px) rotate(45deg); background: #2563eb; }
    .b { transform: rotate(45deg) translateX(120px); background: #16a34a; }
  </style>
</head>
<body>
  <div class="stage"><div class="box a"></div><div class="box b"></div></div>
  <p id="out"></p>
  <script>
    const center = (el) => { const r = el.getBoundingClientRect(); return Math.round(r.left + r.width / 2) + ', ' + Math.round(r.top + r.height / 2); };
    document.getElementById('out').textContent =
      'blue (translate then rotate) center: ' + center(document.querySelector('.a')) +
      '  |  green (rotate then translate) center: ' + center(document.querySelector('.b'));
  </script>
</body>
</html>

Hộp xanh dương được dịch thẳng 120px rồi xoay tại chỗ. Hộp xanh lá được xoay trước, nên "trục x" của nó chỉ theo đường chéo, và translateX(120px) dịch nó xuống theo đường chéo đó. Cùng các hàm, nhưng ra vị trí khác nhau.

Cái bẫy còn lại: khai báo transform thứ hai sẽ thay thế khai báo đầu tiên. Nếu một card có transform: rotate(-2deg) và quy tắc hover của nó ghi transform: scale(1.05), phép xoay sẽ biến mất khi hover. Hãy viết lại cả hai (rotate(-2deg) scale(1.05)), hoặc dùng các thuộc tính riêng ở phần dưới.

transform-origin

Các phép phóng to thu nhỏ, xoay và làm nghiêng diễn ra quanh một điểm cố định, gọi là điểm gốc transform, mặc định nằm ở tâm. Bạn đổi điểm này bằng từ khóa, độ dài hoặc phần trăm:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 20px 30px 40px; }
    .slot { outline: 2px dashed #9ca3af; width: 80px; height: 50px; }
    .box { width: 80px; height: 50px; background: #2563eb; transform: rotate(25deg); }
    .tl { transform-origin: top left; }
    .br { transform-origin: bottom right; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>center</code><div class="slot"><div class="box"></div></div></div>
    <div><code>top left</code><div class="slot"><div class="box tl"></div></div></div>
    <div><code>bottom right</code><div class="slot"><div class="box br"></div></div></div>
  </div>
</body>
</html>

Cả ba hộp đều xoay 25 độ. Hộp đầu tiên xoay quanh tâm, hộp thứ hai giữ góc trên bên trái gắn chặt vào góc của ô, hộp thứ ba giữ góc dưới bên phải. Một menu thả xuống mọc ra từ nút của nó sẽ dùng transform-origin: top cùng với scale().

Các thuộc tính translate, scale và rotate

Các trình duyệt hiện đại còn có ba thuộc tính riêng làm đúng việc của các hàm trên, nhưng có thể đặt và tạo animation độc lập với nhau:

.card {
  rotate: -2deg;
  transition: scale 0.2s ease-out;
}
.card:hover {
  scale: 1.05;   /* the rotation stays, because it is a different property */
}

Chúng luôn được kết hợp như thể viết transform: translate(...) rotate(...) scale(...) đứng trước mọi giá trị transform, bất kể bạn khai báo theo thứ tự nào. Lưu ý cú pháp: translate: 10px 20px và scale: 1.2 nhận giá trị mà không có dấu ngoặc của hàm.

Căn giữa bằng translate(-50%, -50%)

Vì phần trăm trong translate() tính theo kích thước của chính phần tử, top: 50%; left: 50%; transform: translate(-50%, -50%) căn giữa một phần tử định vị tuyệt đối với kích thước bất kỳ trong phần tử cha của nó. Trang căn giữa div so sánh cách này với flexbox và grid.

Lỗi thường gặp

• Hai khai báo transform. Khai báo sau thắng hoàn toàn. Hãy gộp các hàm lại, hoặc dùng các thuộc tính rotate, scale và translate.
• Transform một phần tử inline. Thẻ <span> hay <a> thông thường bỏ qua transform. Hãy đặt cho nó inline-block.
• Tưởng các phần tử lân cận sẽ dịch theo. Transform không bao giờ thay đổi bố cục. Muốn tạo thêm khoảng trống, hãy đổi width, margin hoặc gap.
• Sai thứ tự hàm. rotate() đứng trước translate() sẽ dịch theo trục đã bị xoay.
• Bất ngờ với phần tử con position: fixed. Phần tử được transform trở thành khối chứa (containing block) cho các phần tử con định vị cố định, nên một header cố định bên trong sẽ cuộn theo nó. Nó cũng tạo ra một stacking context mới cho z-index.