CSS ট্রান্সফর্ম জেনারেটর
যেকোনো CSS transform দৃশ্যত তৈরি করুন। translate, rotate, scale ও skew-এর জন্য
স্লাইডার টানুন, perspective সহ 3D rotateX/rotateY যোগ করুন,
transform-origin সেট করুন, flip, tilt ও grow প্রিসেট আজমান, তারপর তৈরি
CSS কপি করুন। সবকিছু আপনার ব্রাউজারেই চলে — কিছুই আপলোড হয় না।
3D ট্রান্সফর্ম
এই CSS ট্রান্সফর্ম জেনারেটর কীভাবে ব্যবহার করবেন
- এটি সরান — বক্সটি সরাতে Translate X/Y ব্যবহার করুন। translate কখনো তার চারপাশের লেআউট বদলায় না, তাই পেজের বাকি কিছুই সরে না।
- এটি ঘোরান — Rotate (Z) বক্সটিকে স্ক্রিনের তলে ঘোরায়। এটি transform-origin-এর চারপাশে ঘোরে, যা শুরুতে কেন্দ্রে থাকে।
- এর আকার বদলান — Scale X/Y বক্সটিকে টানে বা সংকুচিত করে; ঋণাত্মক মান এটিকে মিরর করে দেয়। সমান আকার-পরিবর্তনের জন্য দুটিই সমান সেট করুন।
- এটি তির্যক করুন — Skew X/Y বক্সটিকে সামান্তরিকে হেলিয়ে দেয়।
- 3D-তে যান — 3D ট্রান্সফর্ম খুলুন, Perspective শূন্য থেকে ওঠান, তারপর গভীরতার জন্য Rotate X/Y ও Translate Z ব্যবহার করুন। আউটপুটে perspective সবসময় সবার আগে লেখা হয়।
- CSS কপি করুন — কপি-তে ক্লিক করুন এবং
transformনিয়মটি আপনার স্টাইলশিটে পেস্ট করুন।transform-originলাইন কেবল তখনই যোগ হয় যখন আপনি origin বদলান।
transform ফাংশন রেফারেন্স
| ফাংশন | উদাহরণ | এটি কী করে |
|---|---|---|
| translate() | translate(20px, -10px) | এলিমেন্টকে X ও Y বরাবর সরায়। translateX()/translateY() এক অক্ষে কাজ করে। |
| rotate() | rotate(45deg) | transform-origin-এর চারপাশে 2D তলে ঘোরায়। ধনাত্মক মান ঘড়ির কাঁটার দিকে। |
| scale() | scale(1.2, 0.8) | আকার বদলায়। একটি মান দুই অক্ষকেই scale করে; ঋণাত্মক মান সেই অক্ষকে flip করে। |
| skew() | skewX(12deg) | এলিমেন্টকে X ও/বা Y বরাবর সামান্তরিকে হেলায়। |
| rotateX() / rotateY() | rotateY(40deg) | কোনো 3D অক্ষের চারপাশে ঘোরায়। ত্রিমাত্রিক দেখাতে perspective দরকার। |
| translateZ() | translateZ(30px) | 3D স্থানে দর্শকের দিকে (ধনাত্মক) বা দূরে (ঋণাত্মক) সরায়। |
| perspective() | perspective(500px) | 3D দৃশ্যের গভীরতা। তালিকার প্রথম ফাংশন হতে হবে; ছোট = বেশি নাটকীয়। |
| matrix() | matrix(1,0,0,1,0,0) | নিম্ন-স্তরের 2D রূপ, যাতে অন্য প্রতিটি ফাংশন শেষমেশ কম্পাইল হয়। |
একক গুরুত্বপূর্ণ: translate দূরত্বগুলো একটি <length> (px, %, em…) নেয়, rotate/skew একটি <angle> (deg, rad, turn) নেয়, এবং scale একটি একক-বিহীন সংখ্যা নেয়।
সাধারণ transform প্যাটার্ন
- নিখুঁত কেন্দ্রীকরণ — কোনো এলিমেন্টকে 50%/50%-এ রাখুন, তারপর
transform: translate(-50%, -50%)এটিকে নিজের আকারের অর্ধেক পিছিয়ে টেনে আনে যাতে এটি যেকোনো মাপেই ঠিক কেন্দ্রে বসে। - হোভারে বড় হওয়া —
:hover-এtransform: scale(1.05)একটি মৃদু উত্থান দেয়; যেহেতু scale কম্পোজিট হয়, এটি মসৃণ থাকে। - আইকন মিরর করা —
scaleX(-1)একই ফাইল দুই দিকের জন্য পুনর্ব্যবহার করে (যেমন বাম/ডান তীর)। - টিল্ট / 3D কার্ড —
perspective(800px) rotateY(15deg)কোনো প্রোডাক্ট কার্ডকে একটি মৃদু ত্রিমাত্রিক হেলান দেয়। - flip কার্ড — দুই মুখেই
backface-visibility: hiddenসহ কোনো মুখকেrotateY(180deg)ঘুরিয়ে একটি দুই-পাশের flip তৈরি করুন। - স্লাইড-ইন —
leftঅ্যানিমেট করার বদলেtranslateX(-100%)থেকেtranslateX(0)পর্যন্ত অ্যানিমেট করুন, যাতে প্রতি ফ্রেমে কোনো লেআউট পুনরায় গণনা না হয়।
CSS transforms কোথা থেকে এলো
CSS transforms-এর সূচনা হয়েছিল একটি Apple / WebKit ফিচার হিসেবে। 2D
-webkit-transform প্রপার্টি প্রথম আসে 2008 সালে Safari 3.1-এ,
এবং এরপর Apple iPhone-এর হার্ডওয়্যার-ত্বরিত ইন্টারফেসে অনুপ্রাণিত হয়ে Safari 4 (2009)-এ 3D
transforms ও perspective যোগ করে। Mozilla একই বছর Firefox 3.5-এ
-moz-transform যোগ করে, এবং ধারণাটি CSS Transforms স্পেসিফিকেশন হিসেবে
লেখা হয়, যা W3C পরে 2D ও 3D উভয় ফিচার নিয়ে একটি একক CSS Transforms Module
Level 1-এ সমন্বিত করে। প্রায় 2013 নাগাদ প্রতিটি প্রধান ইঞ্জিন এটিকে প্রিফিক্স ছাড়াই সমর্থন
করতে শুরু করে, এবং এখন এটি একটি “Baseline, ব্যাপকভাবে উপলব্ধ” ফিচার।
একটি গুরুত্বপূর্ণ সংযোজন এসেছে অনেক পরে। এক দশকের বেশি সময় ধরে গতি প্রয়োগের একমাত্র উপায় ছিল
transform শর্টহ্যান্ড, যার মানে কোনো এলিমেন্টের কেবল ঘূর্ণন অ্যানিমেট করতেও আপনাকে তার
translate ও scale পুনরায় বলতে হতো। স্বতন্ত্র transform প্রপার্টিগুলো
— স্বাধীন প্রপার্টি হিসেবে translate, rotate ও scale
— 2022-এ Chrome, Firefox ও Safari-তে Baseline-এ পৌঁছায়, যাতে আপনি প্রতিটি
স্বাধীনভাবে সেট ও অ্যানিমেট করতে পারেন। এগুলো একটি নির্দিষ্ট ক্রমে (আগে translate, তারপর rotate, তারপর
scale) সংযুক্ত হয় এবং transform প্রপার্টিতে এখনও তালিকাভুক্ত যেকোনো ফাংশনের আগে প্রয়োগ
হয়।
ফাংশনের ক্রম ফলাফল কেন বদলে দেয়
একটি transform হলো ফাংশনের একটি তালিকা, এবং ব্রাউজার তাদের লেখা ক্রমে তাদের
ম্যাট্রিক্স গুণ করে সংযুক্ত করে। যেহেতু ম্যাট্রিক্স গুণ বিনিময়যোগ্য (commutative) নয়,
দুটি ফাংশন অদলবদল করলে সাধারণত একটি ভিন্ন চিত্র তৈরি হয়। যে স্বজ্ঞা সাধারণত সাহায্য করে: প্রতিটি ফাংশন
সেই স্থানাঙ্ক-গ্রিডকে রূপান্তরিত করে যাতে পরবর্তী ফাংশন কাজ করে, তাই সবচেয়ে ডানের
ফাংশনটি কার্যত এলিমেন্টে আগে প্রয়োগ হয় এবং সবচেয়ে বামেরটি শেষে।
ক্লাসিক উদাহরণ হলো translate বনাম rotate। transform: translate(100px) rotate(45deg)
এলিমেন্টকে 100px ডানে সরায় এবং তারপর একই জায়গায় ঘোরায়, তাই এটি 100px ডানে ও হেলানো অবস্থায় থাকে।
transform: rotate(45deg) translate(100px) আগে স্থানাঙ্ক-অক্ষ ঘোরায়, তাই এর পরের
100px translate এখন একটি কর্ণ বরাবর চলে — এলিমেন্টটি অন্য কোথাও গিয়ে পড়ে। এদের কোনোটি
“সঠিক” নয়; এরা দুটি ভিন্ন সংযোজন। এই জেনারেটর একটি নির্দিষ্ট, অনুমেয় ক্রম
(perspective, translate, rotate, rotateX, rotateY, translateZ, scale, skew) নির্গত করে; কোনো
ডিজাইনের যদি নির্দিষ্ট সংযোজন দরকার হয়, তবে কপি করা স্ট্রিংয়ে ফাংশনগুলো পুনরায় সাজান।
perspective এবং এটি সেট করার দুটি উপায়
3D ঘূর্ণন সমতল দেখায় যতক্ষণ না আপনি perspective যোগ করেন, যা ব্রাউজারকে জানায়
দর্শক স্ক্রিনের তল থেকে কতটা দূরে। 300px-এর মতো ছোট মান ক্যামেরাকে কাছে রাখে ও গভীরতাকে
বাড়িয়ে দেখায় যাতে কোনো ঘোরানো মুখ নাটকীয়ভাবে ছড়িয়ে যায়; 1500px-এর মতো বড় মান দূরে
দাঁড়ানোর মতো, যা একটি মৃদু, প্রায় সমকোণিক হেলান দেয়। এটিকে শূন্যে সেট করা (এই টুলের ডিফল্ট) কেবল
3D গভীরতা বন্ধ করে দেয়।
এটি প্রয়োগের দুটি উপায় আছে, এবং তারা এক নয়। perspective() ফাংশন
— যা এই জেনারেটর নির্গত করে, এবং যা তালিকার প্রথম আইটেম হতে হবে — সেই একটি এলিমেন্টের
নিজের 3D transform-এ perspective প্রয়োগ করে। কোনো প্যারেন্টে সেট করা perspective প্রপার্টি তার সব বংশধরকে একটি অভিন্ন ভ্যানিশিং পয়েন্ট দেয়, যা তখন দরকার যখন
একাধিক 3D কার্ড এমন দেখাতে হবে যেন তারা একই দৃশ্যে বসে আছে। যখন আপনার দরকার নেস্টেড এলিমেন্ট চ্যাপ্টা
হওয়ার বদলে নিজের গভীরতা বজায় রাখুক, তখন কোনো কনটেইনারে এদের যেকোনোটি transform-style: preserve-3d
সহ যোগ করুন।
পারফরম্যান্স: transforms-ই কেন আপনার কাঙ্ক্ষিত অ্যানিমেশন
একটি ব্রাউজার কোনো ফ্রেম ধাপে ধাপে রেন্ডার করে — স্টাইল পুনরায় গণনা, জ্যামিতির লেআউট,
পিক্সেল পেইন্ট, তারপর স্তরগুলো একসাথে কম্পোজিট করা। বেশিরভাগ CSS প্রপার্টি, অ্যানিমেট করা হলে,
ব্যয়বহুল প্রাথমিক ধাপগুলো বাধ্য করে: width, top বা margin
বদলানো প্রতি ফ্রেমে একটি লেআউট রিফ্লো ও একটি রিপেইন্ট ট্রিগার করে। transform
ও opacity বিশেষ: ব্রাউজার এদের কম্পোজিটর থ্রেডে হস্তান্তর করতে পারে এবং
GPU-তে চালাতে পারে, লেআউট ও পেইন্ট সম্পূর্ণ এড়িয়ে, এ কারণেই অ্যানিমেশন সস্তা ফোনেও 60fps-এ
বজায় থাকে।
ব্যবহারিক সারমর্ম হলো গতিকে transforms হিসেবে প্রকাশ করা: top/left-এর
বদলে translate, width/height-এর বদলে scale। আপনি
will-change: transform দিয়ে ব্রাউজারকে কোনো এলিমেন্টকে আগে থেকেই নিজের স্তরে প্রোমোট করার
ইঙ্গিত দিতে পারেন, তবে এটি সংযমে ব্যবহার করুন — প্রতিটি প্রোমোট করা স্তর মেমরি নেয়, এবং পুরো পেজে
will-change ছড়িয়ে দেওয়া সাহায্যের চেয়ে বেশি ক্ষতি করতে পারে। এটি ঠিক সেই অ্যানিমেশনের আগে
যোগ করুন যার এটি দরকার, এবং অ্যানিমেশন শেষ হলে সরিয়ে দিন।
সাধারণ ভুল (এবং তার সমাধান)
- লেআউট সরার প্রত্যাশা করা। transform কেবল দৃশ্যগত; এলিমেন্ট তার মূল বক্স বজায় রাখে। আপনার যদি আশপাশের কনটেন্ট রিফ্লো করাতে হয়, তবে transform ভুল হাতিয়ার — এর বদলে বক্স মডেল বদলান।
- transform-এর পরে ঝাপসা টেক্সট। সাব-পিক্সেল translate বা ভগ্নাংশ scale রেন্ডারিংকে নরম করতে পারে। translate মানগুলোকে পূর্ণ পিক্সেলে স্ন্যাপ করুন, বা যেখানে গুরুত্বপূর্ণ সেখানে পরিষ্কার স্তর তৈরি করতে
transform: translateZ(0)যোগ করুন। - 3D ঘূর্ণন সমতল দেখায়। আপনি perspective ভুলে গেছেন। perspective ছাড়া কোনো
rotateYকেবল এলিমেন্টকে অনুভূমিকভাবে চেপে দেয়; perspective শূন্য থেকে ওঠান। - ভুল অক্ষবিন্দু। কোনো অপ্রত্যাশিত বিন্দু থেকে দোলা ঘূর্ণন সাধারণত মানে
transform-originসেখানে নেই যেখানে আপনি ধরে নিয়েছিলেন — এটি ডিফল্টভাবে কেন্দ্রে থাকে, কোনো কোণে নয়। - ক্রমে চমকে যাওয়া। translate ও rotate ভুল ক্রমে মেশানো কোনো এলিমেন্টকে অপ্রত্যাশিত জায়গায় পাঠায়; মনে রাখুন সবচেয়ে ডানের ফাংশন আগে প্রয়োগ হয়।
- will-change-এর অতিব্যবহার। একাধিক এলিমেন্টে
will-change: transformস্থায়ীভাবে রেখে দেওয়া GPU মেমরি নষ্ট করে। এটি কেবল যা সত্যিই অ্যানিমেট হচ্ছে তাতেই সীমাবদ্ধ রাখুন।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
CSS transform ফাংশনগুলো কোন ক্রমে প্রয়োগ হয়?
একটি transform তালিকার ফাংশনগুলোকে আপনি যে ক্রমে লেখেন সেই ক্রমেই তাদের ম্যাট্রিক্স গুণ করে সংযুক্ত করা হয়, তাই ক্রম বদলালে ফলাফলও বদলে যায়। এটি বোঝার একটি কাজের উপায়: প্রতিটি ফাংশন সেই স্থানাঙ্ক-ব্যবস্থাকে রূপান্তরিত করে যা পরবর্তী ফাংশন ব্যবহার করে, তাই সবচেয়ে ডানের ফাংশনটি কার্যত এলিমেন্টে সবার আগে প্রয়োগ হয় এবং সবচেয়ে বামেরটি সবার শেষে। এ কারণেই "translate(100px) rotate(45deg)" (আগে ডানে সরাও, তারপর একই জায়গায় ঘোরাও) "rotate(45deg) translate(100px)" (আগে অক্ষ ঘোরাও, তারপর এখন-ঘোরা X বরাবর সরাও) থেকে আলাদা দেখায়। এই জেনারেটর ফাংশনগুলোকে একটি নির্দিষ্ট, পাঠযোগ্য ক্রমে লেখে — perspective, translate, rotate, rotateX, rotateY, translateZ, scale, skew — যাতে আউটপুট অনুমেয় থাকে; আপনার যদি ভিন্ন ক্রম দরকার হয় তবে কপি করা স্ট্রিংটি সম্পাদনা করুন।
CSS transform কি পেজের লেআউট বদলে দেয়?
না। transform সম্পূর্ণরূপে দৃশ্যগত: এলিমেন্টটি এখনও ডকুমেন্ট ফ্লোতে তার মূল বক্স দখল করে থাকে, তাই আশপাশের এলিমেন্টগুলো জায়গা করে দিতে সরে না এবং কিছুই রিফ্লো হয় না। ঠিক এ কারণেই transforms অ্যানিমেট করা সস্তা। জেনে রাখার মতো দুটি পার্শ্বপ্রতিক্রিয়া আছে: একটি transform করা এলিমেন্ট একটি নতুন স্ট্যাকিং কনটেক্সট তৈরি করে (তাই z-index তার ভেতরেই নির্ধারিত হয়), এবং "none" ছাড়া যেকোনো মান এলিমেন্টটিকে তার position:fixed ও position:absolute বংশধরদের জন্য একটি containing block বানিয়ে দেয়।
perspective মান কীসের জন্য, এবং এটি কোথায় বসে?
perspective-ই 3D ঘূর্ণনকে সমতল না দেখিয়ে ত্রিমাত্রিক দেখায় — এটি ঠিক করে দর্শক z=0 তল থেকে কতটা দূরে, তাই ছোট সংখ্যা (ধরুন 300px) একটি জোরালো, বেশি নাটকীয় ফোরশর্টেনিং দেয় আর বড় সংখ্যা (1500px) একটি মৃদু। আপনি যখন perspective() transform ফাংশন ব্যবহার করেন তখন এটি তালিকার প্রথম ফাংশন হতে হবে, এ কারণেই এই টুল সবসময় এটি সবার আগে লেখে। আপনি যদি একাধিক বংশধরের জন্য একটি অভিন্ন ভ্যানিশিং পয়েন্ট চান, তবে প্রতিটি বংশধরে ফাংশনের বদলে তাদের অভিন্ন প্যারেন্টে "perspective" প্রপার্টি ব্যবহার করুন।
আমি কীভাবে কোনো এলিমেন্ট অনুভূমিক বা উল্লম্বভাবে flip করব?
সেই অক্ষে ঋণাত্মক গুণক দিয়ে scale করুন। "transform: scaleX(-1)" কোনো এলিমেন্টকে বাম-থেকে-ডান মিরর করে (অনুভূমিক flip), এবং "scaleY(-1)" এটিকে উপর-থেকে-নিচ মিরর করে (উল্লম্ব flip)। এটি দেখতে এখানে Flip Horizontal / Flip Vertical প্রিসেট ব্যবহার করুন। কোনো আইকন বা ছবিকে দ্বিতীয় ফাইল ছাড়াই মিরর করার আদর্শ, GPU-বান্ধব উপায় হলো ঋণাত্মক scale।
transform-origin কী করে?
transform-origin সেই বিন্দুটি ঠিক করে যার চারপাশে rotate, scale ও skew ঘোরে; এটি ডিফল্টভাবে এলিমেন্টের কেন্দ্রে (50% 50%) থাকে। এটিকে কোনো কোণে বদলে দিলে ঘূর্ণন সেই কোণ থেকে কব্জার মতো দোলে, বা scale সেখান থেকেই বাড়ে। বিশুদ্ধ translate-এ এর কোনো দৃশ্যমান প্রভাব নেই, কারণ কোনো এলিমেন্ট সরানো কোনো অক্ষবিন্দুর উপর নির্ভর করে না। এই জেনারেটর আপনাকে সাধারণ origin (কেন্দ্র, চারটি বাহু, চারটি কোণ) বেছে নিতে দেয় এবং যখনই এটি ডিফল্ট কেন্দ্র নয়, আউটপুটে একটি transform-origin লাইন যোগ করে দেয়।
অ্যানিমেট করার জন্য transform ও opacity কেন সেরা প্রপার্টি?
আধুনিক ব্রাউজার transform ও opacity-কে কম্পোজিটর (GPU) থ্রেডে লেআউট পুনরায় গণনা বা পিক্সেল পুনরায় পেইন্ট না করেই অ্যানিমেট করতে পারে, তাই সাধারণ ডিভাইসেও এগুলো মসৃণ 60fps পর্যন্ত পৌঁছাতে পারে। এর বদলে width, top বা margin-এর মতো লেআউট প্রপার্টি অ্যানিমেট করলে ব্রাউজারকে প্রতি ফ্রেমে জ্যামিতি পুনরায় গণনা ও পুনরায় পেইন্ট করতে হয়, যা অনেক বেশি ব্যয়বহুল ও প্রায়ই ঝাঁকুনিময়। ব্যবহারিক নিয়ম হলো গতি ও আকার-পরিবর্তনকে transforms হিসেবে প্রকাশ করুন — top/left-এর বদলে translate, width/height-এর বদলে scale — এবং "will-change: transform" কেবল তখনই যোগ করুন যখন আপনার সত্যিই এই ইঙ্গিতটি দরকার, কারণ এর অতিব্যবহার মেমরি নষ্ট করে।