Transform: Translate, Rotate, Scale

Sepanjang section ini, transform sudah beberapa kali muncul di contoh — dari bola yang digeser translateX hingga tombol yang terangkat translateY. Kini saatnya membahasnya tuntas. Property transform menggeser, memutar, dan memperbesar elemen secara visual tanpa mengubah satu piksel pun dari layout halaman, dan itulah alasan ia menjadi bahan animasi yang paling sering kita pakai bersama transition. Pada chapter ini kita pelajari tiga fungsi intinya, aturan menggabungkan beberapa fungsi sekaligus, dan alasan performa yang menjadikan transform pasangan terbaik transition.

Tiga Fungsi Inti #

Property transform menerima satu atau beberapa transform function. Tiga yang paling sering dipakai:

Contoh pemakaiannya pada tiga elemen berbeda:

.label-tersemat {
  transform: translate(8px, -4px);
}

.stiker-diskon {
  transform: rotate(-8deg);
}

.foto-profil:hover {
  transform: scale(1.15);
}

Demo berikut merangkum dua pemakaian yang paling umum: kartu di kiri terangkat dan membesar saat di-hover, kotak di kanan diputar permanen menjadi stiker.

Kartu memakai kombinasi translateY(-6px) scale(1.03) dalam satu deklarasi — angkatan dan pembesaran bergerak bersama dalam durasi yang sama, sehingga terasa seperti satu gerakan utuh. Stiker menunjukkan rotate sebagai gaya permanen: tidak semua transform harus menunggu interaksi, banyak desain memakainya sebagai bagian dari tampilan diam.

Setiap fungsi punya singkatan praktis. Satu nilai pada translate() berarti gerakan horizontal saja — translate(8px) sama dengan translate(8px, 0). Satu nilai pada scale() berlaku untuk dua arah sekaligus, sehingga scale(1.15) membesar merata. Untuk rotate, satuan yang paling umum adalah derajat (deg), dan satu putaran penuh berarti 360deg.

Menggabungkan Fungsi dalam Satu Deklarasi #

transform hanya menyimpan satu daftar fungsi. Menulis dua deklarasi transform pada elemen yang sama tidak menggabungkan apa pun — sesuai aturan cascade, deklarasi kedua menimpa yang pertama:

.badge-keranjang {
  transform: translate(4px, -2px);
  transform: rotate(6deg); /* menimpa baris di atasnya */
}

Untuk menggabungkan efek, tulis semua fungsi berurutan dipisah spasi dalam satu deklarasi:

.badge-keranjang {
  transform: translate(4px, -2px) rotate(6deg) scale(1.1);
}

Mari kita uraikan:

1. translate(4px, -2px) — badge bergeser sedikit dari posisi aslinya.
2. rotate(6deg) — diputar enam derajat mengelilingi titik porosnya.
3. scale(1.1) — membesar sepuluh persen.

Urutan Fungsi Menentukan Hasil #

Urutan penulisan bukan formalitas. Setiap fungsi bekerja pada hasil fungsi sebelumnya, sehingga menukar urutan bisa menghasilkan posisi akhir yang berbeda:

.geser-dulu {
  transform: translate(120px, 0) rotate(90deg);
}

.putar-dulu {
  transform: rotate(90deg) translate(120px, 0);
}

Bandingkan posisi akhir kedua kotak berikut — keduanya memakai translate 120px dan rotate 90deg, hanya urutannya yang ditukar:

Rotate yang dijalankan lebih dulu membuat sumbu gerak translate ikut berputar — geseran yang tadinya ke kanan menjadi ke bawah.

Aturan praktisnya: tulis translate lebih dulu bila posisi akhir lebih penting daripada lintasannya. Ketika nilai seperti ini dianimasikan transition, browser membandingkan dua daftar fungsi; bila urutan dan jenisnya sama, tiap fungsi bergerak mulus menuju nilai barunya.

Transform Tidak Mengubah Layout #

Perbedaan terpenting transform dibanding properti seperti margin atau position: transform bekerja pada tahap akhir rendering, setelah layout selesai dihitung. Elemen digeser, diputar, atau dibesarkan secara visual, sementara kotak layout-nya tetap di tempat semula. Tetangganya tidak terdorong, tinggi section tidak berubah, dan browser tidak perlu menghitung ulang tata letak di setiap frame.

Dari sinilah keunggulan performanya berasal. Properti layout seperti width memaksa browser menghitung ulang posisi seluruh elemen yang terdampak di setiap frame, sedangkan transform tidak memicu reflow sama sekali — biayanya konstan dan animasinya tetap halus bahkan pada elemen besar atau halaman yang sibuk. opacity menikmati kemurahan yang sama.

Pemakaian Nyata: Tooltip dan Badge #

translate paling sering dipakai untuk penyesuaian posisi kecil yang tidak boleh memengaruhi alur dokumen:

.tooltip {
  /* digeser separuh lebar sendiri agar tetap terpusat */
  transform: translateX(-50%);
}

.badge-notifikasi {
  transform: translateY(-2px);
}

Persen pada translate dihitung dari ukuran elemen sendiri, bukan induknya — itulah yang membuat pola translateX(-50%) ini bekerja tanpa perlu tahu lebar tooltip dalam piksel:

Sekilas skew #

Masih ada satu fungsi yang layak dikenal: skewX() dan skewY() memiringkan elemen sepanjang satu sumbu, sedangkan skew(x, y) miringkan keduanya. Efeknya menyerupai kemiringan italic yang dipaksakan pada kotak — cocok untuk aksen dekoratif sesekali, tetapi jarang dibutuhkan dalam antarmuka harian. Kenali keberadaannya, lalu kembali ke translate, rotate, dan scale untuk kebutuhan sehari-hari.

Kesalahan Umum #

Ringkasan #

transform menggeser, memutar, dan memperbesar elemen lewat fungsi translate(), rotate(), dan scale() yang digabung dalam satu deklarasi berurutan. Urutan fungsi memengaruhi hasil, dan karena transform bekerja setelah layout selesai, animasinya murah dihitung browser — pasangan terbaik untuk transition. Satu detail masih menentukan bentuk gerakan: titik poros rotasi dan skala. Chapter berikutnya mengaturnya lewat transform-origin.