Transform 2D

Geser, putar, skala, dan miringkan tanpa mengganggu layout.

Pahami konsepnya

Transform memanipulasi kotak elemen di bidang tanpa menyentuh aliran dokumen — tetangga-tetangganya tidak bergeser sedikit pun. Empat jurus dasarnya: translateX/Y (atau translate(x, y)) menggeser; rotate(45deg) memutar mengelilingi titik pusat; scale(1.2) memperbesar-seragam (atau scale(x, y) berbeda arah); dan skew(x, y) memiringkan seperti kartu dilihat serong.

Beberapa transform dirangkai koma dalam satu deklarasi: transform: translate(-50%, -50%) rotate(-2deg) — urutan pengerjaannya kiri-ke-kanan, dan urutan mempengaruhi hasil (memutar lalu menggeser berbeda dengan menggeser lalu memutar). Titik porosnya diatur transform-origin: center bawaan bisa dipindah ke top left atau persen apa pun — rotate berputar mengelilingi titik itu.

Tiga alasan transform menjadi fondasi animasi CSS: ia super ringan (dipercepat GPU, tak memicu layout ulang), ia bisa ditransisikan mulus, dan ia bekerja pada pseudo-element. Praktik umum sehari-hari: hover membesar kartu scale(1.03), ikon berputar rotate saat loading, dan modal muncul translate naik + fade. Nilai 3D-nya (rotateX/Y, perspective, translateZ) adalah kelanjutan alami bila kamu ingin lanjut ke efek kedalaman.

Coba contoh kode

.kartu {
  transition: transform 0.3s ease-out;
}
.kartu:hover {
  transform: translateY(-6px) scale(1.02);
}

.ikon-muat {
  animation: none;
  transform-origin: center;
}
.ikon-muat.putar { transform: rotate(180deg); }

.stempel {
  transform: rotate(-6deg) skew(-4deg);
}

Kartu hover menggabungkan dua jurus — naik 6px dan membesar 2% — dalam satu deklarasi berurutan. Ikon memutar 180° mengelilingi titik pusatnya (transform-origin), dan stempel memakai rotate+skew untuk kesan cap kertas miring. Perhatikan tetangga-tetangga elemen tak pernah ikut bergeser.

Latihan singkat

Buat galeri foto polaroid: tiap kartu miring acak rotate, membesar dan lurus saat hover, dengan transform-origin yang kamu atur sendiri.