transform: menggerakkan tanpa mengganggu layout
transform mengubah tampilan elemen (geser, perbesar, putar) tanpa memicu ulang perhitungan layout — karena itu jauh lebih hemat daripada menganimasikan width, top, atau margin. Efek 'kartu terangkat saat disentuh' dibuat dengan translateY(-4px) plus bayangan. Karena transform tidak mengubah ruang yang ditempati elemen, tetangganya tidak ikut bergeser — itulah alasan efek hover terasa halus tanpa layout melompat.
👀 Contoh dulu
/* beberapa transform ditulis dalam SATU properti, dipisah spasi */
.ikon:hover {
transform: rotate(15deg) scale(1.1);
}
/* SALAH: properti kedua menimpa yang pertama */
.salah:hover {
transform: rotate(15deg);
transform: scale(1.1); /* hanya ini yang berlaku */
}Hasilnya: .ikon berputar sekaligus membesar. Pada .salah, rotasinya hilang karena tertimpa.
💡 Satu elemen hanya boleh punya satu properti transform — gabungkan semua fungsinya di sana.
📝 Sekarang giliranmu
Buat .kartu:hover mengangkat kartu: transform: translateY(-4px) dan scale(1.02) — tulis keduanya dalam satu properti transform.