transform property آپ کو element کو منتقل، پیمانہ، گھومنا، اور skew کرنے دیتی ہے بصری طور پر — document layout کو متاثر کیے بغیر (دوسری elements منتقل نہیں ہوتی)۔ یہ GPU-accelerated ہے، جو اسے animation کے لیے مثالی بناتا ہے۔
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
متعدد functions کی ترتیب سے لگائے جاتے ہیں؛ ترتیب بدلنے سے نتیجہ بدل جاتا ہے (پہلے گھومنا پھر منتقل کرنا منتقل کرنے سے مختلف ہے پھر گھومنا)۔
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
width/margin بدلنے کے برعکس، transform صرف element کی painted شکل کو متاثر کرتا ہے، flow میں اس کی box کو نہیں — تو گردونواح کی elements جگہ پر رہتی ہیں اور کوئی 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); }
translate(-50%, -50%) centering trick سب جگہ استعمال ہوتی ہے — یہ element کو اپنے سائز کے نصف سے واپس منتقل کرتا ہے۔
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
چونکہ transforms layout اور paint کو چھوڑتے ہوئے (صرف compositing) کام کرتے ہیں، انہیں animate کرنا 60fps پر رہتا ہے — position/size animate کرنے سے بہت سستا۔
Transforms CSS animation اور micro-interactions کا کام کار ہیں (hover lifts، modals، carousels، loading spinners)۔
یہ layout trigger کیے بغیر منتقل/پیمانہ/گھومتے ہیں، تو وہ طاقتور اور کارکردہ دونوں ہیں — ویب پر motion animate کرنے کا تجویز کردہ طریقہ۔