ব্যক্তিগত ট্রান্সফর্ম প্রপার্টি

transform প্রপার্টি আপনাকে নির্দিষ্ট ক্রমে একাধিক ট্রান্সফর্মেশন প্রয়োগ করার অনুমতি দেয়, তবে একটি ট্রান্সফর্মেশনে কোনও পরিবর্তন করলে সম্পূর্ণ ট্রান্সফর্মেশন চেইন আবার নির্দিষ্ট করতে হয়। এর ফলে, একটি ট্রান্সফর্মেশন অ্যানিমেট বা ট্রানজিশন করা কঠিন হয়ে যায়।

স্বতন্ত্র CSS ট্রান্সফর্ম প্রপার্টি (translate, rotate এবং scale) আপনাকে transform প্রপার্টি থেকে স্বতন্ত্রভাবে ট্রান্সফর্মেশন প্রয়োগ করতে দেয়। এই পদ্ধতিটি একটি একক রূপান্তর ওভাররাইড করা সহজ করে তোলে, উদাহরণস্বরূপ :hover-এ।

প্রয়োগ সংক্রান্ত গুরুত্বপূর্ণ বিবরণ

আপনার CSS-এ যে ক্রমেই থাকুক না কেন, আলাদা আলাদা ট্রান্সফর্ম প্রপার্টি সবসময় একটি নির্দিষ্ট ক্রমে প্রয়োগ করা হয়:

1. translate
2. rotate
3. scale
4. transform (শেষবার প্রয়োগ করা হয়েছে)

আপনার যদি অন্য কোনও অর্ডারের প্রয়োজন হয় (যেমন, ঘোরানোর আগে স্কেলিং), তাহলে আপনাকে অবশ্যই transform প্রপার্টি ফাংশন ব্যবহার করা চালিয়ে যেতে হবে।

ট্রান্সফর্ম ফাংশন স্বতন্ত্র ট্রান্সফর্ম প্রপার্টি ওভাররাইড করে না। অন্যভাবে বলতে গেলে, scale: 2; transform: scale(3); প্রথমে ২ গুণ, তারপর আবার ৩ গুণ, অর্থাৎ মোট ৬ গুণ বৃদ্ধি পাবে।

স্ট্যাকিং কনটেক্সট ও কন্টেনিং ব্লকে অপ্রত্যাশিত পরিবর্তন আটকানো

transform প্রপার্টি এবং স্বতন্ত্র ট্রান্সফর্ম প্রপার্টি পৃষ্ঠার লেআউট এবং রেন্ডারিংয়ের উপর প্রভাব ফেলে এবং z-ইনডেক্স বা অ্যাঙ্কর পজিশনিংয়ের ক্ষেত্রে অপ্রত্যাশিত আচরণ করতে পারে। বাধ্যতামূলক: :hover-এর মতো কোনও এলিমেন্টের স্ট্যাটাস পরিবর্তনের অংশ হিসেবে ট্রান্সফর্ম প্রয়োগ করা হলে অথবা ট্রানজিশন বা অ্যানিমেশন থাকলে, বেস এলিমেন্টে আইডেন্টিটি ট্রান্সফর্মেশন প্রয়োগ করুন। এটি নিশ্চিত করে যে ট্রান্সফর্ম প্রয়োগ করা হলে এলিমেন্টের স্ট্যাকিং কন্টেক্সট এবং কন্টেনমেন্ট পরিবর্তন হয় না।

.element{
  /* MANDATORY: Apply identity transformations for properties that will
     change on state changes (like :hover). This prevents unexpected layout
     or z-index shifts caused by creating a new stacking context only on hover. */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
}
.element:hover{
  translate: 10px 10px;
  rotate: 20deg;
  scale: 0.8;
}

ইন্ডিপেন্ডেন্ট অ্যানিমেশন ও ট্রানজিশন

প্রাথমিক সুবিধা হল ওভারল্যাপ করা অ্যানিমেশন বা ট্রানজিশন সংজ্ঞায়িত করার ক্ষমতা যা কোনও দ্বন্দ্ব ছাড়াই বিভিন্ন প্রপার্টিকে টার্গেট করে।

.card {
  /* Define independent animations that don't overwrite each other */
  animation: float 3s infinite ease-in-out;
  
  /* Transition only the scale property for hover states */
  transition: scale 0.3s ease;

  /* Establish the base scale to prevent a sudden stacking context shift when transitioning on hover. */
  scale: 1;
}

.card:hover {
  /* Only the scale changes; the 'float' animation (translate) continues uninterrupted */
  scale: 1.05;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

ফলব্যাক স্ট্র্যাটেজি

যেসব ব্রাউজারে স্বতন্ত্র ট্রান্সফর্ম প্রপার্টি কাজ করে না, সেগুলিতে ট্র্যাডিশনাল transform প্রপার্টি ব্যবহার করুন। মনে রাখবেন, আপনি যদি অন্য কোনও অবস্থায় একটি অংশ পরিবর্তন করতে চান, তাহলে আপনাকে পুরো ট্রান্সফর্ম স্ট্যাক আবার ঘোষণা করতে হবে।

.element {
  /* Base transform */
  transform: translate(100px, 0) rotate(45deg);
  /* Specify the identity for the scale property. */
  scale: 1;
}

@supports not (translate: 0px) {
  .element:hover {
    /* Fallback: Must repeat translate and rotate even if only scale changes */
    transform: translate(100px, 0) rotate(45deg) scale(1.1);
  }
}

@supports (translate: 0px) {
  .element:hover {
    /* Modern: Only declare the change */
    scale: 1.1;
  }
}