Properti transform memungkinkan Anda memindahkan, menskalakan, memutar, dan memiringkan elemen secara visual — tanpa mempengaruhi tata letak dokumen (elemen lain tidak bergeser). Itu dipercepat GPU, menjadikannya ideal untuk animasi.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Banyak fungsi diterapkan secara berurutan; mengubah urutan mengubah hasilnya (memutar kemudian menerjemahkan berbeda dari menerjemahkan kemudian memutar).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Tidak seperti mengubah width/margin, transform hanya mempengaruhi penampilan tercat elemen, bukan kotaknya dalam aliran — jadi elemen sekitar tetap di tempatnya dan tidak ada reflow. Ini adalah alasan yang tepat mengapa transforms halus.
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* hover lift */
.card:hover { transform: translateY(-4px); }
/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
Trik pemusatan translate(-50%, -50%) ada di mana-mana — itu menggeser elemen kembali sebesar setengah ukurannya sendiri.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Karena transforms melewati tata letak dan cat (hanya compositing), menganimasikannya tetap pada 60fps — jauh lebih murah daripada menganimasikan posisi/ukuran.
Transforms adalah kuda kerja animasi CSS dan mikro-interaksi (hover lifts, modals, carousel, loading spinners).
Mereka memindahkan/menskalakan/memutar tanpa memicu tata letak, jadi mereka berpengaruh dan berkinerja — cara yang direkomendasikan untuk menganimasikan gerakan di web.