Transform: Geser, Putar, Skala

Mengubah tanpa mengganggu layout

transform mengubah tampilan visual elemen tanpa mempengaruhi layout di sekitarnya. Elemen yang di-translate 100px tidak mendorong tetangganya: ruang aslinya tetap dijaga. Ini juga yang bikin transform sangat mulus buat animasi (dijalankan GPU).

translate: geser

.kotak {
  transform: translate(20px, -10px); /* kanan 20px, atas 10px */
}

/* atau per sumbu */
.kotak {
  transform: translateX(50%);
}

Persen pada translate mengacu ke ukuran elemen itu sendiri, bukan induknya. translateX(-50%) menggeser setengah lebar elemen ke kiri. Ini fondasi trik centering absolute:

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* tengah sempurna */
}

rotate: putar

.ikon {
  transform: rotate(45deg);
}

Satuan: deg (derajat), tapi ada juga turn (0.5turn = 180 derajat, lebih mudah dibaca buat putaran penuh).

scale: ubah ukuran visual

.tombol:hover {
  transform: scale(1.1); /* 10% lebih besar */
}

.cermin {
  transform: scaleX(-1); /* cerminkan horizontal */
}

Satu nilai = skala seragam kedua sumbu. Dua nilai = scaleX, scaleY. Nilai negatif mencerminkan.

skew: miringkan

.banner {
  transform: skewX(-12deg); /* efek miring dinamis */
}

Jarang dipakai sendirian, tapi berguna buat aksen visual seperti label miring.

Menggabungkan transform

.kartu {
  transform: translateY(-8px) rotate(2deg) scale(1.02);
}

Ditulis dalam satu properti, dipisah spasi. Urutan berpengaruh: translate lalu rotate hasilnya beda dengan rotate lalu translate, karena tiap transform mengubah sistem koordinat buat transform berikutnya.

transform-origin: titik tumpu

.pintu {
  transform-origin: left center; /* berputar dari engsel kiri */
  transform: rotateY(60deg);
}

Secara default transform berpusat di tengah elemen (center). Ubah titik tumpunya sesuai kebutuhan: pojok, tepi, atau koordinat bebas.

Catatan teknis: karena transform tidak memicu reflow layout, animasi transform + opacity adalah dua properti paling murah buat browser. Aturan performa: kalau bisa dianimasikan pakai transform, jangan pakai top/left/width/margin. Bedanya terasa banget di HP kentang.

Rangkuman

translate (geser), rotate (putar), scale (ukuran), skew (miring) bisa digabung dalam satu properti dan urutannya penting. transform-origin mengatur titik tumpu. Ingat dua keunggulan: tidak mengganggu layout dan murah buat animasi.