Transform — সরানো, ঘোরানো, বড়-ছোট আর 3D

১ · transform কী — আঁকার সময়ের কারসাজি, লেআউট অটুট

আগের পর্বগুলোতে আপনি বাক্সের জায়গা বদলেছেন নানা উপায়ে — margin দিয়ে, position দিয়ে (পর্ব ২৪), Flexbox আর Grid দিয়ে (পর্ব ২৫–২৮)। এসবের একটি মিল আছে: সবই layout-এর অংশ। একটি বাক্স বড় হলে বা সরলে ব্রাউজার আবার হিসাব করে পাশের আর পরের বাক্স কোথায় বসবে।

কিন্তু কখনো কখনো আমরা চাই শুধু চোখে দেখা ছবিটা বদলাক, পাতার কাঠামো নয়। পণ্য-কার্ডে মাউস রাখলে কার্ডটি একটু ওপরে ভেসে উঠুক। মেনু খোলার তীরচিহ্নটি ঘুরে যাক। ফ্ল্যাশ কার্ড উল্টে পেছনের লেখা দেখাক। এর জন্য CSS-এর transform property. এটি বাক্সের লেআউট শেষ হওয়ার পরে, আঁকার সময় বাক্সটিকে সরায়, ঘোরায়, বড়-ছোট করে বা হেলায়।

নিচের এডিটরে দুটি সারি। ওপরের সারিতে লাল বাক্সটি transform: scale(1.4) দিয়ে বড় করা; নিচের সারিতে একই বাক্স সত্যিই width আর height বাড়িয়ে বড় করা। দুই সারির পার্থক্য খেয়াল করুন:

p { font-family: sans-serif; margin: 8px 0 4px; }
.row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 16px; background: #f1f5f9;
}
.box {
  width: 70px; height: 70px;
  display: grid; place-items: center;
  font: 700 22px sans-serif;
  background: #93c5fd; border: 2px solid #1d4ed8;
}
.a .hot { transform: scale(1.4); background: #fca5a5; }
.b .hot { width: 98px; height: 98px; background: #fca5a5; }

কেন এমন হয়? ব্রাউজার একটি পাতা দেখানোর জন্য কয়েকটি ধাপ পার হয় (পর্ব ১-এ এর পরিচয় পেয়েছেন)। transform কোন ধাপে কাজ করে, সেটিই এর সব আচরণের চাবি। নিচের ডায়াগ্রামে ধাপে ধাপে দেখুন:

২ · চার মূল ফাংশন — translate, rotate, scale, skew

transform-এর মান হলো এক বা একাধিক transform function, ফাঁকা জায়গা দিয়ে আলাদা করা: transform: translate(20px, 10px) rotate(15deg);. প্রতিটি ফাংশন এক রকম বদল। চারটি দিয়েই বেশিরভাগ কাজ হয়ে যায়:

পাঁচটি বাক্স নিচে। প্রতিটির চারপাশের ধূসর ডটেড দাগ হলো বাক্সের লেআউটের আসল জায়গা; রঙিন বাক্সটি transform-এর পরে যেভাবে আঁকা হলো:

.slot {
  display: inline-block;
  width: 90px; height: 90px; margin: 26px;
  outline: 2px dashed #94a3b8;
}
.box {
  height: 100%;
  display: grid; place-items: center;
  font: 600 15px sans-serif;
  background: #a7f3d0; border: 2px solid #047857;
  box-sizing: border-box;
}
.t .box { transform: translate(20px, 15px); }
.r .box { transform: rotate(30deg); }
.s .box { transform: scale(0.7); }
.k .box { transform: skewX(-20deg); }
.m .box { transform: scaleX(-1); }

translate-এর % — নিজের মাপ থেকে মাপা

CSS-এ সাধারণত % মাপা হয় parent থেকে — width: 50% মানে parent-এর অর্ধেক। কিন্তু translate-এর % মাপা হয় element-এর নিজের বাক্স থেকে: translateX(100%) মানে “নিজের পুরো চওড়ার সমান ডানে সরো”। পর্ব ২৪-এ মাঝখানে বসানোর যে কৌশল দেখেছেন, সেটি এই নিয়মের ওপরই দাঁড়িয়ে:

.modal {
  position: absolute;
  top: 50%; left: 50%;          /* parent থেকে মাপা: ওপর-বাঁ কোণ মাঝখানে */
  transform: translate(-50%, -50%); /* নিজের মাপ থেকে মাপা: নিজের অর্ধেক পিছিয়ে */
}

এই কৌশলে মোডালের মাপ জানা না থাকলেও চলে। আজকের দিনে শুধু মাঝখানে বসানোর জন্য Grid-এর place-items: center (পর্ব ২৬) বা <dialog> (পর্ব ১১) প্রায়ই সহজতর; তবে translate-এর কৌশলটি পুরোনো কোডে সর্বত্র পাবেন, আর এর একটি লুকানো ফাঁদ অংশ ৫-এ দেখবেন।

৩ · ক্রম বদলালে ফল বদলায় — বাঁ থেকে ডানে পড়ুন

একাধিক ফাংশন একসাথে লিখলে তাদের ক্রম গুরুত্বপূর্ণ। গণিতে ৩ + ৫ আর ৫ + ৩ একই, কিন্তু “ঘোরো, তারপর হাঁটো” আর “হাঁটো, তারপর ঘোরো” এক নয়।

নিজে চালিয়ে মিলিয়ে দেখুন। দুটি বাক্স একই জায়গা থেকে শুরু, একই দুটি ফাংশন পেয়েছে — শুধু ক্রম আলাদা:

.stage {
  position: relative; height: 240px;
  background: #f8fafc; border: 1px solid #cbd5e1;
}
.ghost, .box {
  position: absolute; top: 30px; left: 30px;
  width: 60px; height: 60px;
}
.ghost { outline: 2px dashed #94a3b8; }
.box {
  display: grid; place-items: center;
  font: 700 15px sans-serif; opacity: 0.9;
}
.one { background: #93c5fd; transform: translate(150px) rotate(45deg); }
.two { background: #fca5a5; transform: rotate(45deg) translate(150px); }

৪ · transform-origin — কোন বিন্দু ধরে ঘুরবে

দরজা ঘোরে কবজা ধরে, ঘড়ির কাঁটা ঘোরে একেবারে গোড়া ধরে, আর পাখা ঘোরে মাঝখান ধরে। CSS-এ এই কেন্দ্রবিন্দুটি ঠিক করে transform-origin. ডিফল্ট মান 50% 50% — অর্থাৎ বাক্সের ঠিক মাঝখান। rotate, scale আর skew এই বিন্দু ঘিরে ঘটে; translate-এর ওপর এর প্রভাব নেই (সরানো তো সরানোই)।

মান লেখা যায় keyword-এ (left, right, top, bottom, center), %-এ, বা দৈর্ঘ্যে: transform-origin: left top, transform-origin: 0 100%, transform-origin: 20px 10px. প্রথম মান আড়াআড়ি (x), দ্বিতীয়টি খাড়া (y). 3D-র জন্য তৃতীয় একটি দৈর্ঘ্যও দেওয়া যায় (z).

.pane {
  position: relative; display: inline-block;
  width: 160px; height: 200px; margin: 6px;
  background: #f1f5f9; font: 13px sans-serif;
}
.pane small { position: absolute; top: 4px; right: 6px; }
.ghost, .bar {
  position: absolute; left: 20px; top: 95px;
  width: 120px; height: 24px;
}
.ghost { outline: 2px dashed #94a3b8; }
.bar  { background: #f59e0b; transform: rotate(40deg); }
.p1 .bar { transform-origin: center; }
.p2 .bar { transform-origin: left center; }
.p3 .bar { transform-origin: right center; }

বাস্তবে transform-origin খুব কাজে লাগে: ড্রপডাউন মেনু ওপর থেকে নিচে “খুলে” আনতে (transform-origin: top + scaleY), ঘড়ির কাঁটা বানাতে (bottom center), বা টুলটিপ তার তীরের দিক থেকে বড় হতে। একটি সাবধানতা: SVG-র ভেতরের আকারে (পর্ব ৪৪) origin-এর হিসাব ডিফল্টভাবে আলাদা, সেখানে transform-box: fill-box দিতে হয়।

৫ · আলাদা property — translate, rotate, scale আর ভেতরের matrix

transform একটি মাত্র property, যার মানে পুরো ফাংশনের তালিকা। এর একটি পুরোনো যন্ত্রণা আছে। ধরুন মোডালটি মাঝখানে বসাতে লিখেছেন transform: translate(-50%, -50%). এখন hover-এ একটু বড় করতে লিখলেন:

.modal       { transform: translate(-50%, -50%); }
.modal:hover { transform: scale(1.05); }   /* ✖ পুরো তালিকা বদলে গেল — translate হারাল! */
.modal:hover { transform: translate(-50%, -50%) scale(1.05); } /* পুরোনো সমাধান: সব আবার লেখো */

cascade-এ (পর্ব ১৮) জেতা rule পুরো transform মানটাই বদলে দেয় — তালিকার একটি ফাংশন আলাদা করে বদলানো যায় না। ফলে hover-এ মোডাল লাফিয়ে ডান-নিচে সরে যেত। সমাধান হিসেবে CSS-এ এসেছে তিনটি আলাদা transform property: translate, rotate আর scale. প্রতিটি আলাদা property, তাই একটি বদলালে বাকিগুলো অটুট থাকে:

.modal       { translate: -50% -50%; }   /* কমা নেই, ফাংশনও নেই */
.modal:hover { scale: 1.05; }            /* translate অক্ষত ✔ */

.icon   { rotate: 45deg; }               /* 3D: rotate: y 45deg; অথবা rotate: 1 1 0 30deg; */
.banner { scale: 1.2 0.8; }              /* x আর y আলাদা */

এই তিনটি property এখন Baseline Widely available — সব আধুনিক ব্রাউজারে কয়েক বছর ধরে চলে। খুব পুরোনো ব্রাউজার এগুলো না বুঝলে লাইনটি শুধু উপেক্ষা করবে; সেখানে ছবি ঠিক রাখা জরুরি হলে transform দিয়ে লিখুন। কিন্তু একটি প্রশ্ন থাকে: translate, rotate, scale আর transform — চারটিই একসাথে দিলে কোনটা আগে? উত্তর: আপনি যে ক্রমেই লিখুন, ব্রাউজার একটি নির্দিষ্ট ক্রমে জোড়ে।

1.card {2  scale: 1.5;3  transform: skewX(-15deg);4  rotate: 20deg;5  translate: 80px 0;6}

matrix() — ব্রাউজার আসলে যা হিসাব করে

আপনি যত ফাংশনই লিখুন, ব্রাউজার শেষে সবগুলোকে গুণ করে একটি মাত্র transformation matrix বানায় — ছয়টি সংখ্যার একটি ছক। 2D-তে সেটি লেখা হয় matrix(a, b, c, d, e, f): a, b, c, d ঘোরানো, বড়-ছোট আর হেলানো একসাথে বহন করে, আর e, f হলো সরানো। JavaScript-এ getComputedStyle() দিয়ে transform পড়লে আপনি ঠিক এই matrix-টিই পান। নিচের ছোট টুলটি চালিয়ে দেখুন:

(function m() {
  if (!document.body.offsetWidth) return setTimeout(m, 50);
  var el = document.getElementById('c');
  var cs = getComputedStyle(el);
  console.log('লেখা ছিল: translateX(30px) rotate(30deg)');
  console.log('ব্রাউজার দিল: ' + cs.transform);
  console.log('offsetWidth (লেআউটের মাপ): ' + el.offsetWidth);
  var w = el.getBoundingClientRect().width;
  console.log('getBoundingClientRect (আঁকা মাপ): ' + w.toFixed(1));
})();

৬ · 3D-র জগৎ — z-অক্ষ, perspective আর দূরত্বের বিভ্রম

পর্দা সমতল, কিন্তু CSS-এ একটি তৃতীয় অক্ষ আছে — z-অক্ষ, যা পর্দা ভেদ করে আপনার চোখের দিকে আসে। ধনাত্মক z মানে আপনার দিকে, ঋণাত্মক মানে পর্দার ভেতরে। এই অক্ষ ধরে কাজ করে নতুন কয়েকটি ফাংশন:

কিন্তু শুধু rotateY(50deg) দিলে মজার কিছু দেখবেন না — কার্ডটি শুধু একটু সরু দেখাবে। কারণ গভীরতার বিভ্রম তৈরি করতে চাই perspective — দর্শক পর্দা থেকে কত দূরে বসে আছেন। কাছের জিনিস বড়, দূরের জিনিস ছোট দেখায়; perspective ছাড়া ব্রাউজার সব কিছু সমান মাপে চ্যাপ্টা করে আঁকে। নিচের ডায়াগ্রামে একই কার্ড, একই rotateY(50deg) — শুধু perspective বদলাচ্ছে:

perspective property বনাম perspective() ফাংশন

perspective দেওয়ার দুটি উপায় আছে, আর পার্থক্যটা গুরুত্বপূর্ণ। perspective property বসে parent-এ, আর তার সব সন্তান একটি সাধারণ দর্শক আর একটি vanishing point ভাগ করে নেয় — যেন সবাই একই মঞ্চে। perspective() ফাংশন বসে element-এর নিজের transform-এ, আর প্রতিটি element নিজের আলাদা দর্শক পায়। ফাংশনটি তালিকার প্রথমে লিখতে হয়, না হলে আগের ফাংশনগুলোর ওপর এর প্রভাব পড়ে না।

p { font-family: sans-serif; margin: 6px 0; }
.row {
  display: flex; gap: 18px; justify-content: center;
  padding: 18px; background: #f1f5f9;
}
.card {
  width: 90px; height: 110px; border-radius: 8px;
  display: grid; place-items: center;
  font: 700 22px sans-serif; color: #fff;
  background: linear-gradient(90deg, #1d4ed8, #60a5fa);
}
.scene { perspective: 400px; }
.scene .card { transform: rotateY(45deg); }
.solo .card { transform: perspective(400px) rotateY(45deg); }

৭ · preserve-3d আর backface-visibility — ফ্ল্যাশ কার্ড আর কিউব

3D-র আরও দুটি property ছাড়া কার্ড ফ্লিপ বা কিউব বানানো যায় না।

transform-style: preserve-3d — ডিফল্টে (flat) একটি element-এর সন্তানরা যত 3D-ই হোক, parent তাদের নিজের সমতলে চ্যাপ্টা করে আঁকে — যেন একটি ছবির ফ্রেমের ভেতরে। preserve-3d দিলে সন্তানরা একই 3D জগতে নিজের গভীরতা নিয়ে থাকে। কিউবের ছয়টি মুখ ঘোরাতে হলে মোড়কে এটি লাগবেই।

backface-visibility: hidden — প্রতিটি element-এর একটি পেছনের দিক আছে। ডিফল্টে ১৮০° ঘোরালে পেছন থেকে লেখাটি আয়নার মতো উল্টো দেখা যায়। hidden দিলে পেছন ফিরলেই element অদৃশ্য — ফ্ল্যাশ কার্ডের সামনের দিক উল্টালে লুকিয়ে যায়, আর পেছনের দিকটা দেখা দেয়। আজ এটি prefix ছাড়াই সব আধুনিক ব্রাউজারে চলে (Baseline Widely available); একসময় Safari-তে -webkit- লাগত, নতুন কোডে আর দরকার নেই।

এবার একটি ইংরেজি শব্দ শেখার ফ্ল্যাশ কার্ড বানাই — সামনে বাংলা শব্দ, পেছনে ইংরেজি অর্থ। কার্ডটি একটি আসল <button>, তাই মাউস, কীবোর্ড (Tab, তারপর Enter বা Space) আর টাচ — সবভাবেই উল্টানো যায়:

<style>
  .card { border: 0; padding: 0; background: none; cursor: pointer;
          width: 240px; height: 140px; margin: 20px; perspective: 800px; }
  .inner { display: block; position: relative; height: 100%;
           transform-style: preserve-3d; transition: transform 0.6s; }
  .card[aria-pressed="true"] .inner { transform: rotateY(180deg); }
  .face { position: absolute; inset: 0; display: grid; place-items: center;
          border-radius: 14px; font: 700 30px sans-serif;
          backface-visibility: hidden; }
  .front { background: #fde68a; color: #78350f; }
  .back  { background: #1e3a8a; color: #fff; transform: rotateY(180deg); }
  @media (prefers-reduced-motion: reduce) { .inner { transition: none; } }
</style>
<button class="card" aria-pressed="false">
  <span class="inner">
    <span class="face front">নদী</span>
    <span class="face back" lang="en">river</span>
  </span>
</button>
<script>
  document.querySelector('.card').addEventListener('click', function () {
    this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true');
  });
</script>

কেন <div>-এ :hover দিয়ে নয়? কারণ hover শুধু মাউসে হয় — ফোনে আর কীবোর্ডে কার্ড উল্টাবেই না। <button> নিজে থেকেই focus পায় আর Enter/Space বোঝে, আর aria-pressed screen reader-কে জানায় কার্ডটি এখন উল্টানো কি না (পর্ব ১২)। দুই মুখের লেখাই DOM-এ আছে, তাই screen reader বোতামের নাম হিসেবে “নদী river” পড়বে — শব্দ শেখার কার্ডে সেটি ক্ষতিকর নয়; কুইজ বানালে উত্তরের দিকটি পড়া বন্ধ রাখার ব্যবস্থা ভাবতে হবে।

একটি সহজ 3D কিউব

কিউবের কৌশল অংশ ৩-এর ক্রমের নিয়মেরই প্রয়োগ। ছয়টি মুখ শুরুতে একই জায়গায় স্তূপ করা। প্রতিটি মুখকে আগে নির্দিষ্ট দিকে ঘোরান, তারপর নিজের “সামনে” — অর্থাৎ z-অক্ষ ধরে — অর্ধেক কিউবের সমান translateZ দিয়ে ঠেলে দিন। ঘোরানোর পর প্রতিটির “সামনে” আলাদা দিকে, তাই ছয়টি মুখ ছয় দিকে সরে বাক্সের দেয়াল হয়ে দাঁড়ায়:

.scene { width: 120px; height: 120px; margin: 70px auto; perspective: 600px; }
.cube {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(35deg);
}
.face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 30px sans-serif; color: #fff;
  border: 2px solid #fff; opacity: 0.9;
}
.f1 { background: #2563eb; transform: translateZ(60px); }
.f2 { background: #16a34a; transform: rotateY(90deg) translateZ(60px); }
.f3 { background: #dc2626; transform: rotateY(180deg) translateZ(60px); }
.f4 { background: #9333ea; transform: rotateY(-90deg) translateZ(60px); }
.f5 { background: #ea580c; transform: rotateX(90deg) translateZ(60px); }
.f6 { background: #0891b2; transform: rotateX(-90deg) translateZ(60px); }

৮ · পার্শ্বপ্রতিক্রিয়া — stacking context, fixed-এর ফাঁদ আর ঝাপসা লেখা

transform শুধু ছবি বদলায় না, কয়েকটি নিয়মও চুপচাপ বদলে দেয়। এগুলো না জানলে এমন বাগ হয় যার কারণ খুঁজে পাওয়া কঠিন।

১. নতুন stacking context

none ছাড়া যেকোনো transform — এবং translate, rotate, scale-এর none ছাড়া যেকোনো মান — element-কে একটি নতুন stacking context বানায় (পর্ব ২৪)। ফলে তার ভেতরের z-index: 9999-ও বাইরের অন্য দলের ওপরে উঠতে পারে না। hover-এ কার্ড একটু বড় করার জন্য scale: 1.02 দেওয়ার পর ড্রপডাউন পাশের কার্ডের নিচে চলে গেলে এটিই কারণ। বোনাস হিসেবে transform-ওয়ালা element নিজে অন্য সাধারণ (non-positioned) ভাইবোনের ওপরে আঁকা হয়, যেন position: relative পেয়েছে।

২. fixed বাক্সের containing block

এটিই সবচেয়ে বড় ফাঁদ। সাধারণত position: fixed বাক্স viewport-এর সাথে আটকে থাকে। কিন্তু কোনো পূর্বপুরুষে transform থাকলে সেই পূর্বপুরুষই তার containing block হয়ে যায় — fixed বাক্স তখন পাতার সাথে স্ক্রল হয়ে চলে যায়:

.page     { transform: translateX(0); }   /* নিরীহ দেখায় — হয়তো স্লাইড অ্যানিমেশনের জন্য */
.chat-btn { position: fixed; right: 16px; bottom: 16px; }
/* ফল: চ্যাট বোতাম viewport নয়, .page-এর কোণে বসে, আর স্ক্রলে চলে যায় */

একই কাজ করে perspective, filter, will-change: transform আর আলাদা transform property-গুলোও। সমাধান: fixed বা মোডাল অংশ transform-ওয়ালা মোড়কের বাইরে রাখুন — সরাসরি <body>-এর সন্তান করে, অথবা <dialog>/popover ব্যবহার করে, যারা top layer-এ ওঠে (পর্ব ১১, ২৪)।

৩. ঝাপসা লেখা আর ভগ্নাংশ পিক্সেল

কখনো দেখবেন transform দেওয়া বাক্সের লেখা একটু ঝাপসা। দুটি সাধারণ কারণ। প্রথমটি ভগ্নাংশ পিক্সেল: translate(-50%, -50%) দিয়ে মাঝখানে বসানো বাক্সের উচ্চতা বিজোড় হলে (ধরুন ২০১px) সরানোর পরিমাণ হয় ১০০.৫px; লেখা তখন দুই পিক্সেলের মাঝখানে পড়ে, আর কিছু ব্রাউজারে বা স্ক্রিনে কিনারা নরম দেখায়। দ্বিতীয়টি বড় করা ছবি: ব্রাউজার একটি স্তরকে ছোট অবস্থায় আঁকার পর GPU দিয়ে scale করে বড় করলে, অনেক সময় নতুন করে না আঁকা পর্যন্ত সেটি ঝাপসা থাকে — বিশেষ করে will-change: transform দেওয়া থাকলে। আচরণটি ব্রাউজার আর ডিভাইসভেদে আলাদা।

• শুধু মাঝখানে বসাতে transform-এর বদলে Grid/Flexbox (place-items: center) ব্যবহার করুন — ভগ্নাংশ সরানোর প্রশ্নই আসে না।
• বড় হওয়ার অ্যানিমেশনে উল্টো দিক থেকে ভাবুন: আসল (বড়) মাপে বানিয়ে শুরুতে scale: 0.9 দিন, শেষে scale: 1 — শেষ অবস্থা হুবহু আসল মাপে।
• will-change: transform শুধু সত্যিই অ্যানিমেশন হওয়া অল্প কয়েকটি element-এ, সব জায়গায় নয়; প্রতিটি আলাদা স্তর GPU-র মেমরি খায়।

৯ · hover ইফেক্ট, transition আর নড়াচড়ার দায়িত্ব

transform-এর সবচেয়ে প্রচলিত ব্যবহার হলো transition-এর সাথে ছোট ইফেক্ট (পর্ব ৩৮): মাউস রাখলে কার্ড একটু ওপরে ভাসে, আইকন একটু ঘোরে। আলাদা transform property থাকায় প্রতিটি অংশকে আলাদা সময় আর গতি দেওয়া যায়। নিচের কার্ডগুলোতে মাউস রাখুন, অথবা Tab চেপে focus আনুন:

.card {
  display: inline-block; width: 170px; margin: 24px 10px;
  padding: 18px; border-radius: 12px;
  font: 600 16px sans-serif; color: #0f172a; text-decoration: none;
  background: #fff; border: 1px solid #cbd5e1;
  transition: translate 0.2s ease, scale 0.2s ease, box-shadow 0.2s ease;
}
.card:hover, .card:focus-visible {
  translate: 0 -6px; scale: 1.03;
  box-shadow: 0 12px 20px rgb(0 0 0 / 0.15);
}
.icon { display: inline-block; transition: rotate 0.3s ease; }
.card:hover .icon, .card:focus-visible .icon { rotate: -15deg; }
@media (prefers-reduced-motion: reduce) {
  .card, .icon { transition: none; }
}

অ্যাক্সেসিবিলিটি — নড়াচড়া সবার জন্য আরামদায়ক নয়

কিছু মানুষের ভেতরের কানের ভারসাম্য-ব্যবস্থায় (vestibular system) সমস্যা থাকে; বড় নড়াচড়া, ঘূর্ণন, zoom বা parallax দেখলে তাঁদের মাথা ঘোরে, বমি ভাব হয়, মাথাব্যথা হয়। তাই নিয়মগুলো এমন:

• prefers-reduced-motion: reduce-এ বড় translate, rotate, 3D ফ্লিপ আর zoom অ্যানিমেশন বন্ধ বা খুব ছোট করেছি — অবস্থা বদলাক, নড়াচড়া নয়
• জরুরি লেখা (দাম, নির্দেশনা, ফর্মের লেবেল) ঘোরানো, উল্টানো বা হেলানো অবস্থায় রাখিনি — হেলানো লেখা পড়া কঠিন, বিশেষ করে বাংলার যুক্তাক্ষর আর মাত্রা
• scaleX(-1) দিয়ে আয়না করা লেখা চোখে উল্টো দেখায় — শুধু আইকন উল্টাতে ব্যবহার করেছি, লেখায় নয়
• যা hover-এ ঘটে, তা :focus-visible-এও ঘটে, আর ফ্লিপ-কার্ডের মতো জিনিস আসল বোতাম দিয়ে চালানো যায়
• scale দিয়ে বড় করা জিনিস পাশের লেখা বা focus outline ঢেকে দিচ্ছে না — transform লেআউট বদলায় না, তাই ঢেকে দেওয়া খুব সহজ

WCAG 2.2-এর WCAG 2.3.3 “Animation from Interactions” (AAA স্তর) বলে, ব্যবহারকারীর কাজে শুরু হওয়া অপ্রয়োজনীয় নড়াচড়া বন্ধ করার উপায় থাকা উচিত। AAA বাধ্যতামূলক না হলেও prefers-reduced-motion মানা আজ পেশাদার কাজের ন্যূনতম মান। reduced motion আর বড় লেখার বিস্তারিত পর্ব ৪৫-এ।

১০ · AI-এর যুগে — transform-এর কাজ AI-কে দিলে কী দেখবেন

“একটা কার্ড ফ্লিপ বানাও” বা “hover-এ কার্ড ভাসাও” বললে AI মুহূর্তেই কোড দেয়, আর সেটা চলেও। কিন্তু AI শিখেছে বহু বছরের পুরোনো টিউটোরিয়াল থেকে, তাই prefix-এ ভরা, কীবোর্ডে অচল, নড়াচড়া-সংবেদনশীল মানুষের কথা না ভাবা কোড প্রায়ই আসে।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এ element বেছে Computed ট্যাবে transform-এর matrix দেখেছি, আর Styles-এ কোনো hover rule আগের transform মুছে দিচ্ছে কি না মিলিয়েছি
• শুধু Tab আর Enter/Space দিয়ে পুরো ইফেক্ট চালিয়েছি; মোবাইল মোডে (device toolbar) টাচেও চালিয়েছি
• DevTools-এর Rendering প্যানেলে prefers-reduced-motion: reduce নকল করে দেখেছি নড়াচড়া কমে কি না
• Performance প্যানেলে অ্যানিমেশন রেকর্ড করে দেখেছি — প্রতি ফ্রেমে Layout হচ্ছে কি না (হলে কেউ left/width নাড়াচ্ছে)
• অচেনা property MDN-এ পড়েছি, Can I use-এ সাপোর্ট দেখেছি, আর validator.w3.org ও Lighthouse চালিয়েছি