The transform property lets you move, scale, rotate, and skew an element visually — without affecting the document layout (other elements don't shift). It's GPU-accelerated, making it ideal for animation.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.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 केवळ घटकाच्या रंगलेल्या दृश्यावर परिणाम करते, त्याच्या बॉक्सवर नाहीच प्रवाहात — म्हणून आसपासचे घटक स्थिर राहतात आणि कोणतेही रिफ्लो नाही. हेच कारण आहे की 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%) केंद्रीकरण ट्रिक सर्वत्र आहे — हे घटकाला त्याच्या स्वतःच्या आकारापैकी अर्धा मागे हलवते.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
कारण transforms लेआउट आणि पेंट वगळते (फक्त कंपोजिटिंग), त्यांचे अॅनिमेशन 60fps वर राहते — position/size चे अॅनिमेशन करण्यापेक्षा अधिक स्वस्त.
Transforms हे CSS अॅनिमेशन आणि सूक्ष्म-परस्परक्रिया (होव्हर लिफ्ट्स, मोडल्स, कॅरोसेल्स, लोडिंग स्पिनर्स) चे कार्यरत घोडे आहेत.
ते लेआउट ट्रिगर केल्याशिवाय हलवतात/स्केल/रोटेट करतात, म्हणून ते शक्तिशाली आणि कार्यक्षम दोन्ही आहेत — वेबवर गती अॅनिमेट करण्याचा शिफारस केलेला मार्ग.