The transform property आपको एक तत्व को स्थानांतरित, स्केल, घुमाने और skew करने की अनुमति देता है दृश्य रूप से — दस्तावेज़ लेआउट को प्रभावित किए बिना (अन्य तत्व शिफ्ट नहीं होते)। यह GPU-त्वरित है, जो इसे एनिमेशन के लिए आदर्श बनाता है।
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.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 smooth हैं।
/* 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); } }
क्योंकि transforms लेआउट और पेंट को छोड़ते हैं (केवल compositing), उन्हें animate करना 60fps पर रहता है — position/size animate करने से बहुत सस्ता।
Transforms CSS एनिमेशन और माइक्रो-इंटरैक्शन (hover lifts, modals, carousels, loading spinners) का मुख्य साधन हैं।
वे लेआउट को ट्रिगर किए बिना move/scale/rotate करते हैं, इसलिए वे शक्तिशाली और कुशल दोनों हैं — वेब पर गति को animate करने का अनुशंसित तरीका।