Transform CSS: Translate, Rotate, Scale — CSS

Transform adalah properti CSS untuk menggeser, memutar, membesarkan, dan memiringkan elemen tanpa mengganggu layout sekitarnya. Coba di playground.

transform mengubah tampilan sebuah elemen: menggeser (translate), memperbesar atau memperkecil (scale), memutar (rotate), dan memiringkan (skew). Yang berubah cuma gambarnya. Tempat aslinya di halaman tetap dipesan, jadi elemen di sekitarnya gak ikut bergeser.

🧪 Tebakan cepat: translate(100px, 0) scale(2) dan scale(2) translate(100px, 0). Geserannya sama jauh gak? Tebak dulu, jawabannya ada di bagian "Gabung beberapa fungsi, urutannya penting".

Menggeser tanpa mendorong tetangga

.box {
  transform: translateX(100px);
}

transform adalah propertinya. Nilainya satu atau beberapa fungsi, misalnya translateX().
translateX(100px) menggeser kotak 100px ke kanan. Angka negatif menggeser ke kiri.

Hasilnya, kotaknya pindah 100px ke kanan dan bisa menimpa elemen di sebelahnya. Tempat aslinya tetap kosong dan dipesan, jadi tetangganya diam di tempat. Beda dengan margin-left: 100px, yang ikut mendorong tetangganya.

Empat fungsi transform

translate(x, y): geser. translate(100px, 150px) artinya 100px ke kanan dan 150px ke bawah. Satu sumbu saja: translateX() atau translateY().
scale(n): ubah ukuran dari tengahnya. scale(1.5) jadi 1.5 kali lebih besar, scale(0.5) jadi setengahnya. Satu angka memperbesar lebar dan tinggi sekaligus, dan angkanya tanpa satuan.
rotate(sudut): putar searah jarum jam. rotate(45deg) memutar 45 derajat. Satuannya deg (derajat) atau turn (putaran penuh).
skew(sudut): miringkan, misalnya skewX(10deg).

Gabung beberapa fungsi, urutannya penting

.box {
  transform: translate(100px, 150px) scale(1.5);
}

Semua fungsi ditulis di satu transform, dipisah spasi.
Jangan tulis transform: dua kali di rule yang sama. Yang kedua menimpa yang pertama, jadi cuma satu yang jalan.
Tulis geseran dulu, baru ukuran. Kalau scale(1.5) ditulis duluan, geserannya ikut diperbesar 1.5 kali: kotaknya pindah 150px ke kanan dan 225px ke bawah, bukan 100px dan 150px.

Jawaban tebakan: gak sama. scale(2) yang ditulis duluan bikin geseran 100px jadi 200px.

⚠️ Jebakan yang sering ketemu

Lupa satuan di translate. translate(100, 150) gak valid, jadi seluruh transform diabaikan. Tulis 100px. scale() justru ditulis tanpa satuan.
Titik putarnya di tengah. rotate dan scale berpusat di tengah elemen. Mau dari pojok? Tambahkan transform-origin: top left.
Elemen position: fixed di dalam elemen yang punya transform. Dia gak lagi menempel ke layar, tapi ke elemen yang punya transform itu.

💡 Transform cocok buat animasi. Browser gak perlu menghitung ulang layout waktu transform berubah, jadi gerakannya mulus. Buat hover atau animasi, geser pakai transform, bukan margin atau left.

🔬 Coba sendiri

Geser, putar, perbesar dan miringkan kotak di bawah, lalu lihat kode transform-nya berubah.

TL;DR: transform menggeser (translate), mengubah ukuran (scale), memutar (rotate) dan memiringkan (skew) tanpa mendorong elemen lain. Beberapa fungsi ditulis di satu transform, dipisah spasi, karena transform kedua menimpa yang pertama. Urutannya berpengaruh: tulis translate() dulu, baru scale(), biar geserannya gak ikut diperbesar.