CSS Transform: translate, scale, skew dan transform-origin

Apa fungsi transform

transform mengubah cara elemen digambar: dipindahkan, diubah ukurannya, diputar, atau dimiringkan. Garis putus-putus di bawah menunjukkan posisi setiap kotak kalau tidak diberi 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) memindahkan kotak biru 20px ke samping dan 10px ke bawah. scale(1.3) membuat kotak hijau 30% lebih besar di sekitar titik tengahnya. rotate(20deg) memutar kotak kuning searah jarum jam, dan skewX(-20deg) memiringkan kotak gelap. Dalam semua kasus, slot putus-putus itu, yaitu ruang yang dipakai elemen di layout, tetap berada persis di tempatnya semula.

Fungsi transform

Persentase di translate() relatif terhadap ukuran elemen itu sendiri, bukan ukuran elemen induknya. Rotasi punya halamannya sendiri, lengkap dengan derajat, putaran, dan efek berputar: CSS rotate.

Playground transform

Geser slider-nya. Baris pertama adalah nilai transform yang kamu buat, dan baris kedua adalah matriks yang dihitung browser darinya, yaitu nilai yang dikembalikan getComputedStyle untuk transform apa pun:

<!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 tidak memindahkan layout

Elemen yang diberi transform digambar di tempat lain, tetapi halamannya ditata seolah-olah elemen itu tidak diberi transform. Elemen di sekitarnya tetap di posisinya. Inilah yang membuat transform cocok untuk efek hover dan animasi: tidak ada yang ditata ulang di sekitarnya.

<!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>

Kedua kotak di tengah terlihat 1,5 kali lebih besar. Kotak yang di-scale menimpa tetangganya dan C tetap di tempatnya, sedangkan kotak yang diperbesar dengan width dan height mendorong C 40px lebih jauh.

Beberapa transform dan urutannya

Taruh beberapa fungsi dalam satu transform, dipisahkan spasi. Urutannya mengubah hasil, karena kalau dibaca dari kiri ke kanan, setiap fungsi bekerja di sistem koordinat yang ditinggalkan fungsi-fungsi sebelumnya:

<!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>

Kotak biru dipindahkan lurus sejauh 120px lalu diputar di tempat. Kotak hijau diputar lebih dulu, jadi "sumbu x"-nya mengarah diagonal, dan translateX(120px) memindahkannya menuruni garis diagonal itu. Fungsinya sama, tempatnya berbeda.

Jebakan lainnya: deklarasi transform kedua menggantikan yang pertama. Kalau sebuah kartu punya transform: rotate(-2deg) dan aturan hover-nya berisi transform: scale(1.05), rotasinya hilang saat hover. Tulis ulang keduanya (rotate(-2deg) scale(1.05)), atau pakai property individual di bawah.

transform-origin

Perubahan ukuran, rotasi, dan kemiringan terjadi di sekitar sebuah titik tetap, yaitu transform origin, yang secara default adalah titik tengah. Ubah titik itu dengan kata kunci, panjang, atau persentase:

<!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>

Ketiga kotak berputar 25 derajat. Kotak pertama berputar di bagian tengahnya, kotak kedua menjaga sudut kiri atasnya tetap terpaku di sudut slot, dan kotak ketiga menjaga sudut kanan bawahnya. Menu dropdown yang tumbuh dari tombolnya memakai transform-origin: top bersama scale().

Property translate, scale, dan rotate

Browser modern juga punya tiga property terpisah yang melakukan hal yang sama dengan fungsi-fungsi tadi, tetapi bisa diatur dan dianimasikan secara mandiri:

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

Ketiganya selalu digabungkan seolah-olah ditulis transform: translate(...) rotate(...) scale(...) di depan nilai transform apa pun, dengan urutan deklarasi apa pun. Perhatikan sintaksnya: translate: 10px 20px dan scale: 1.2 menerima nilai tanpa tanda kurung fungsi.

Menengahkan dengan translate(-50%, -50%)

Karena persentase translate() mengacu pada ukuran elemen itu sendiri, top: 50%; left: 50%; transform: translate(-50%, -50%) menengahkan elemen yang diposisikan secara absolute di dalam elemen induknya, berapa pun ukurannya. Halaman center a div membandingkannya dengan flexbox dan grid.

Kesalahan yang sering terjadi

• Dua deklarasi transform. Yang ditulis belakangan menang sepenuhnya. Gabungkan fungsinya, atau pakai property rotate, scale, dan translate.
• Memberi transform pada elemen inline. <span> atau <a> biasa mengabaikan transform. Ubah menjadi inline-block.
• Mengira elemen di sekitarnya ikut bergeser. Transform tidak pernah mengubah layout. Untuk membuat ruang, ubah width, margin, atau gap.
• Urutan fungsi yang salah. rotate() sebelum translate() memindahkan elemen di sepanjang sumbu yang sudah diputar.
• Kejutan dengan child position: fixed. Elemen yang diberi transform menjadi containing block bagi turunan dengan posisi fixed, jadi header fixed di dalamnya ikut ter-scroll. Elemen itu juga membuat stacking context baru untuk z-index.