Il-proprietà transform tippermettilok tmevvel, tiskalizza, ddur, u tmevvel element viżwalment — mingħajr ma taffettwa l-layout tad-dokument (elementi oħra ma jitniċċaw). Hija GPU-accelerated, ligħaliha ideali għal-animazzjoni.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Funzjonijiet multipli huma applikati f'sekwenza; billi tbiddel l-ordni, tbiddel ir-riżultat (ddur imbagħad ttrasla hija differenti minn ttrasla imbagħad ddur).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
B'differenza minn biddel width/margin, transform biss taffettwa l-aspett mappiż ta' l-element, mhux il-kaxxa tagħha fil-flow — għalhekk elementi ta' madwarna jibqgħu fil-post u m'hemm l-ebda reflow. Hija eżattament għaliex transforms jistgħu jkunu bla xaqlieq.
/* 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); }
It-trick tal-ċentring translate(-50%, -50%) hija dappertuttu — imeċċ l-element lura b'nofs tal-saħħa tagħha stess.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Billi transforms aqbeż layout u paint (biss compositing), animaż tagħhom ibqgħu f'60fps — ħafna iżjed irħis milli animaż position/size.
Transforms huma l-cavall tax-xogħol tal-animazzjoni CSS u mikro-interazzjonijiet (hover lifts, modals, carousels, loading spinners).
Huma tmevvel/tiskalizza/iddur mingħajr ma jgħibu l-layout, allura huma tanto qawwija kif ukoll effettivi — il-mod irrakkommandat biex tanimizza l-moviment fuq il-web.