The transform property તમને એક તત્વને ખસેડવા, સ્કેલ કરવા, રોટેટ કરવા અને skew કરવા જોગવાઈ આપે છે દૃષ્ટિ રીતે — દસ્તાવેજ લેઆઉટને અસર કર્યા વગર (અન્ય તત્વો શિફ્ટ થતા નથી). તે GPU-accelerated છે, જે તેને એનિમેશન માટે આદર્શ બનાવે છે.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
બહુવિધ ફંક્શન્સ ક્રમમાં લાગુ થાય છે; ક્રમમાં ફેરફાર પરિણામમાં ફેરફાર કરે છે (રોટેટ કર્યા પછી ટ્રાન્સલેટ કરવું એ ટ્રાન્સલેટ કર્યા પછી રોટેટ કરવાથી અલગ છે).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
width/margin બદલવાથી અલગ, એક transform ફક્ત તત્વના painted દેખાવને અસર કરે છે, તેના બોક્સને ફ્લોમાં નહીં — તેથી આસપાસના તત્વો સ્થાને રહે છે અને કોઈ reflow નથી. આ બરાબર તે છે કે શા માટે transforms સરળ છે.
/* 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); }
The translate(-50%, -50%) centering trick સર্વત્રધર્મી છે — તે તત્વને તેના પોતાના કદના અર્ધ દ્વારા પાછું શિફ્ટ કરે છે.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
લેઆઉટ અને paint છોડી દે છે (માત્ર compositing), તેમને animate કરવું 60fps પર રહે છે — position/size animate કરવા કરતાં ઘણું સસ્તું.
Transforms એ CSS એનિમેશન અને માઇક્રો-ઇન્ટરેક્શન્સ (hover lifts, modals, carousels, loading spinners) ના કાર્યક્ષેત્ર છે.
તેઓ લેઆઉટને ટ્રિગર કર્યા વગર ખસેડે/સ્કેલ/રોટેટ કરે છે, તેથી તેઓ શક્તિશાળી અને કાર્યક્ષમ બંને છે — વેબ પર ગતિ એનિમેટ કરવાની ભલામણ કરવામાં આવેલી રીત.