Sifa ya transform inakuruhusu kusonga, kupanua, kuzunguka, na kukegeuka kipengele kwa mahali — bila kuathiri usambazaji wa hati (vipengele vingine havitembei). Ina kasi ya GPU, na hivyo ni bora kwa uhuishaji.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Funksho nyingi zinatumika kwa mfuatano; kubadilisha mpangilio kubadilisha matokeo (kuzunguka kisha kusonga hutofautiana na kusonga kisha kuzunguka).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Tofauti na kubadilisha width/margin, transform inaathiri tu iliyochorwa mwonekano wa kipengele, si sanduku lake katika mtiririko — kwa hivyo vipengele vinavyozunguka vinabaki mahali na hakuna muonekano upya. Hii ndiyo sababu transforms ni laini.
/* 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); }
Hila ya translate(-50%, -50%) kwa kuongeza katikati ni kote — inasonga kipengele nyuma kwa nusu ya ukubwa wake.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Kwa sababu transforms zaruka usambazaji na kuchora (tu kuchanganya), uhuishaji wa hizo hubaki saa 60fps — nafuu sana kuliko uhuishaji wa nafasi/ukubwa.
Transforms ni mfumuko wa CSS uhuishaji na mikro-ushirikiano (hover lifts, modals, carousels, loading spinners).
Wanasonga/wanakupanua/wanazunguka bila kuanzisha usambazaji, kwa hivyo wana nguvu na ufanisi — njia inayopendekezwa ya uhuishaji wa mwendo kwenye wavuti.