transform property ले तपाईंलाई element लाई हिलाउन, मापन गर्न, घुमाउन र skew गर्न दिन्छ दृश्यत: — कागजात लेआउट प्रभावित गर्दैन (अन्य elements सिफ्ट हुँदैनन्)। यो GPU-त्वरित छ, जसले यसलाई एनिमेसनको लागि आदर्श बनाउँछ।
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.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 उपस्थिति प्रभावित गर्छ, तसको box प्रवाहमा छैन — त्यसैले वरपरका elements ठाउँमा रहन्छ र कुनै 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); }
translate(-50%, -50%) केन्द्र गर्ने चाल सर्वव्यापी छ — यो element लाई आफ्नो आकार को आधा द्वारा फिर्ता गर्छ।
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
लेआउट र paint स्किप गर्न (केवल compositing), एनिमेसन गर्दा उनीहरु 60fps मा रहन्छ — स्थिति/आकार एनिमेट गर्न भन्दा धेरै सस्तो।
Transforms CSS एनिमेसन र सूक्ष्म-अन्तरक्रिया को खचर हो (hover lifts, modals, carousels, loading spinners)।
तिनीहरु लेआउट को कारण नगरी हिलाउँछन्/मापन गर्छन्/घुमाउँछन्, तसैले तिनीहरु दुवै शक्तिशाली र प्रदर्शन गर्छन् — वेबमा गति एनिमेट गर्न सिफारिस गरिएको तरीका।