Translate, Rotate, dan Scale

Dari seluruh fungsi yang dimiliki properti transform , tiga di antaranya muncul hampir di setiap antarmuka modern: translate untuk menggeser, rotate untuk memutar, dan scale untuk menskalakan. Ketiganya bekerja setelah perhitungan layout selesai, sehingga elemen yang ditransformasi tidak menggeser tetangganya sepeser pun. Chapter ini memperdalam tiga fungsi tersebut — Chapter Transform telah memperkenalkan dasarnya — mulai dari perilaku satuan persen yang sering disalahpahami hingga cara membaca hasil gabungan tiga fungsi sekaligus.

Tiga Fungsi Dasar #

Satu perilaku yang wajib dipegang: persen pada translate mengacu pada ukuran elemen itu sendiri, bukan ukuran induknya. Aturan ini berbeda dari kebiasaan width: 50% yang dihitung dari induk. Akibatnya, translateX(50%) pada kotak selebar 120px berarti geseran 60px — nilai yang ikut menyesuaikan secara otomatis ketika ukuran kotak berubah.

Demo chapter ini menampilkan enam kotak dengan transform statis:

.kotak-geser-y  { transform: translateY(10px); }
.kotak-geser-p  { width: 120px; transform: translateX(50%); }
.kotak-putar    { transform: rotate(45deg); }
.kotak-skala    { transform: scale(2); }
.kotak-tidak-rata { transform: scale(1.5, 0.75); }

Hasil di Browser:

Enam kotak tampil dengan transform statis. Nilai computed transform:
translateY(10px) → "matrix(1, 0, 0, 1, 0, 10)";
translateX(50%) pada kotak 120px → "matrix(1, 0, 0, 1, 60, 0)";
rotate(45deg) → "matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)";
scale(2) → "matrix(2, 0, 0, 2, 0, 0)";
scale(1.5, 0.75) → "matrix(1.5, 0, 0, 0.75, 0, 0)";
translate(20px, 10px) rotate(45deg) scale(2) →
"matrix(1.41421, 1.41421, -1.41421, 1.41421, 20, 10)".

Mari kita telaah hasilnya:

1. translateY(10px): dua angka terakhir matriks adalah geseran x, y — di sini 0, 10, artinya kotak pindah 10px ke bawah.
2. translateX(50%): browser menghitung persen terlebih dahulu (50% dari 120px = 60px), lalu menuliskan hasilnya sebagai 60 pada matriks.
3. rotate(45deg): nilai 0.707107 adalah cos(45°) dan sin(45°) — putaran dikodekan pada empat angka pertama matriks.
4. scale(2) dan scale(1.5, 0.75): satu angka berarti kedua sumbu sama; dua angka memungkinkan peregangan asimetris — di sini lebar membesar 1,5 kali sementara tinggi menyusut menjadi 0,75 kali.

Menggabungkan Tiga Fungsi #

Satu deklarasi transform boleh memuat beberapa fungsi yang dipisahkan spasi. Urutan penulisan menentukan hasil akhir — urutan paling aman untuk pemula adalah geser, lalu putar, lalu skala:

.stiker {
  /* geser, putar, lalu perbesar */
  transform: translate(20px, 10px) rotate(45deg) scale(2);
}

1. translate(20px, 10px) berada paling kiri, sehingga geseran dihitung pada sumbu halaman: komponen terakhir matriks berbunyi 20, 10 — posisi akhir elemen mudah diprediksi.
2. rotate(45deg) scale(2) bercampur menjadi satu blok rotasi-skala: cos(45°) × 2 = 1.41421, itulah asal empat angka pertama pada matriks computed.
3. Apabila urutan ditulis berbeda — misalnya rotate(45deg) translate(20px, 10px) — geseran 20px terjadi pada sumbu yang telah diputar 45°, sehingga titik akhirnya melenceng ke arah lain. Perbandingan lengkapnya ada pada Chapter Transform .

Properti Individual translate, rotate, scale #

Selain fungsi pada transform, CSS menyediakan tiga properti individual : translate, rotate, dan scale. Keduanya menghasilkan efek visual yang sama:

.notifikasi {
  translate: 0 10px;   /* sama dengan translateY(10px) */
  rotate: 45deg;       /* sama dengan rotate(45deg) */
  scale: 2;            /* sama dengan scale(2) */
}

Keunggulan properti individual ada pada transisi: kita dapat menganimasikan scale saja tanpa menimpa rotate yang ditulis aturan lain, sesuatu yang sulit dilakukan bila kedua fungsi itu berbagi satu deklarasi transform. Browser selalu menggabungkan ketiganya dengan urutan tetap — translate, rotate, scale — apa pun urutan penulisannya. Fitur ini didukung penuh oleh seluruh browser modern, dan akan terasa berguna ketika kita menyusun transisi pada Chapter Transition Properties .

Demo chapter ini (fungsi-dasar.html) membawa enam kotak dengan transform statis beserta tujuh pemeriksaan data-expected pada properti transform — seluruh matriks pada “Hasil di Browser” di atas diverifikasi langsung oleh harness.