The transform property আপনাকে একটি উপাদান সরানো, স্কেল করা, ঘোরানো, এবং তির্যক করা করতে দেয় — ভিজ্যুয়ালি দলিল লেআউট প্রভাবিত না করে (অন্যান্য উপাদান স্থানান্তরিত হয় না)। এটি 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 পরিবর্তন করার বিপরীতে, একটি রূপান্তর শুধুমাত্র উপাদানের আঁকা চেহারা প্রভাবিত করে, প্রবাহে এর বক্স নয় — তাই চারপাশের উপাদান জায়গায় থাকে এবং কোনো reflow নেই। এটি ঠিক কেন রূপান্তর মসৃণ।
/* 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); } }
কারণ রূপান্তর লেআউট এবং পেইন্ট বাদ দেয় (শুধু সংমিশ্রণ), তাদের অ্যানিমেট করা 60fps এ থাকে — অবস্থান/আকার অ্যানিমেট করার চেয়ে অনেক বেশি সস্তা।
রূপান্তর CSS অ্যানিমেশন এবং মাইক্রো-ইন্টারঅ্যাকশনের কর্মঘোড়া (হভার লিফট, মোডাল, ক্যারোসেল, লোডিং স্পিনার)।
তারা লেআউট ট্রিগার না করে সরানো/স্কেল/ঘোরায়, তাই তারা শক্তিশালী এবং কার্যকর — ওয়েবে গতির অ্যানিমেশনের সুপারিশকৃত উপায়।