স্বতন্ত্র রূপান্তর বৈশিষ্ট্য সহ CSS রূপান্তরের উপর সূক্ষ্ম দানাদার নিয়ন্ত্রণ

translate , rotate , এবং scale বৈশিষ্ট্য সহ উপাদানগুলিকে রূপান্তর করুন

Bramus

L. David Baron

CSS transform সম্পত্তি

একটি উপাদানে রূপান্তর প্রয়োগ করতে, CSS transform সম্পত্তি ব্যবহার করুন। সম্পত্তি এক বা একাধিক <transform-function> ফাংশন> গ্রহণ করে যা একের পর এক প্রয়োগ করা হয়।

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

টার্গেট করা উপাদানটি X-অক্ষে 50% দ্বারা অনুবাদ করা হয়, 30 ডিগ্রি দ্বারা ঘোরানো হয় এবং অবশেষে 120% পর্যন্ত স্কেল করা হয়।

যদিও transform প্রপার্টি তার কাজ ঠিকঠাক করে, আপনি যখন এই মানগুলির যেকোন একটিকে পৃথকভাবে পরিবর্তন করতে চান তখন এটি কিছুটা ক্লান্তিকর হয়ে ওঠে।

হোভারে স্কেল পরিবর্তন করতে, আপনাকে অবশ্যই ট্রান্সফর্ম প্রপার্টিতে সমস্ত ফাংশন ডুপ্লিকেট করতে হবে, যদিও তাদের মান অপরিবর্তিত থাকে।

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

স্বতন্ত্র রূপান্তর বৈশিষ্ট্য

Chrome 104 এর সাথে শিপিং হল CSS রূপান্তরের জন্য পৃথক বৈশিষ্ট্য। বৈশিষ্ট্যগুলি হল scale , rotate এবং translate , যা আপনি একটি রূপান্তরের অংশগুলিকে পৃথকভাবে সংজ্ঞায়িত করতে ব্যবহার করতে পারেন।

এটি করার মাধ্যমে, Chrome Firefox এবং Safari-এ যোগ দেয় যা ইতিমধ্যেই এই বৈশিষ্ট্যগুলিকে সমর্থন করে৷

স্বতন্ত্র বৈশিষ্ট্যগুলির সাথে পূর্ববর্তী transform উদাহরণটি পুনরায় লিখলে, আপনার স্নিপেটটি হয়ে যায়:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

অর্ডার বিষয়

মূল CSS transform বৈশিষ্ট্য এবং নতুন বৈশিষ্ট্যগুলির মধ্যে একটি মূল পার্থক্য হল ঘোষিত রূপান্তরগুলি প্রয়োগ করার ক্রম।

transform সাথে, ট্রান্সফর্মেশন ফাংশনগুলি যে ক্রমানুসারে লিখিত হয় সে অনুযায়ী প্রয়োগ করা হয়-বাম থেকে (বাইরে) ডানে (ভিতরে)।

স্বতন্ত্র রূপান্তর বৈশিষ্ট্যগুলির সাথে, ক্রমটি সেই ক্রম নয় যেখানে সেগুলি ঘোষণা করা হয়। ক্রম সর্বদা একই: প্রথমে translate (বাইরে), তারপর rotate এবং তারপর scale (ভিতরে)।

তার মানে নিম্নলিখিত কোড স্নিপেট উভয় একই ফলাফল দেয়:

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

উভয় ক্ষেত্রেই লক্ষ্যযুক্ত উপাদানগুলি প্রথমে X-অক্ষে 50% দ্বারা অনুবাদ করা হবে, তারপর 30deg দ্বারা ঘোরানো হবে এবং অবশেষে 1.2 দ্বারা স্কেল করা হবে।

যদি স্বতন্ত্র ট্রান্সফর্ম বৈশিষ্ট্যগুলির মধ্যে একটিকে একটি transform বৈশিষ্ট্যের সাথে ঘোষণা করা হয়, তাহলে পৃথক রূপান্তরগুলি প্রথমে প্রয়োগ করা হয় ( translate , rotate এবং তারপর scale ) transform শেষ (ভিতরে) সাথে। আরও বিশদ বিবরণের মধ্যে রয়েছে যা সংজ্ঞায়িত করে কিভাবে রূপান্তর ম্যাট্রিক্স গণনা করা উচিত ।

অ্যানিমেশন

এই বৈশিষ্ট্যগুলি যোগ করার প্রধান কারণ হল অ্যানিমেশনগুলিকে সহজ করা। বলুন আপনি নিম্নরূপ একটি উপাদান অ্যানিমেট করতে চান:

transform ব্যবহার করে

transform ব্যবহার করে এই অ্যানিমেশনটি বাস্তবায়ন করার জন্য, আপনাকে সমস্ত সংজ্ঞায়িত রূপান্তরের জন্য সমস্ত মধ্যবর্তী মানগুলি গণনা করতে হবে এবং প্রতিটি কীফ্রেমে সেগুলি অন্তর্ভুক্ত করতে হবে৷ উদাহরণস্বরূপ, 10% চিহ্নে একটি ঘূর্ণন করতে, অন্যান্য রূপান্তরগুলির মানগুলিও গণনা করা আবশ্যক, কারণ transform সম্পত্তির জন্য সেগুলির সমস্ত প্রয়োজন।

ফলে CSS কোডটি হয়ে যায়:

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

স্বতন্ত্র রূপান্তর বৈশিষ্ট্য ব্যবহার করে

স্বতন্ত্র রূপান্তর বৈশিষ্ট্যগুলির সাথে এটি লিখতে অনেক সহজ হয়ে যায়। কীফ্রেম থেকে কীফ্রেমে সমস্ত রূপান্তর টেনে আনার পরিবর্তে, আপনি প্রতিটি রূপান্তরকে পৃথকভাবে লক্ষ্য করতে পারেন। এছাড়াও আপনাকে আর সেই সমস্ত মানগুলির মধ্যে গণনা করতে হবে না।

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

স্বতন্ত্র রূপান্তর বৈশিষ্ট্য এবং বেশ কয়েকটি কীফ্রেম ব্যবহার করা

আপনার কোড মডুলার করতে আপনি প্রতিটি সাব-অ্যানিমেশনকে তার নিজস্ব কীফ্রেমের সেটে বিভক্ত করতে পারেন।

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

এই বিভাজনের জন্য ধন্যবাদ আপনি আপনার পছন্দ মতো প্রতিটি আলাদা আলাদা কীফ্রেমের সেট প্রয়োগ করতে পারেন কারণ transform বৈশিষ্ট্যগুলি – যা এখন পৃথক বৈশিষ্ট্যে পরিণত হয়েছে – আর একে অপরকে ওভাররাইট করবে না। এর উপরে আপনি সম্পূর্ণ লট পুনরায় লেখার প্রয়োজন ছাড়াই প্রতিটি রূপান্তরকে একটি ভিন্ন সময় দিতে পারেন।

কর্মক্ষমতা

এই নতুন বৈশিষ্ট্যগুলি ব্যবহার করে অ্যানিমেশনগুলি বিদ্যমান transform সম্পত্তির অ্যানিমেশনগুলির মতোই কার্যকর।

ট্রান্সফর্মের অ্যানিমেশনগুলি যেভাবে কম্পোজিটরে translate , rotate এবং scale অ্যানিমেশনগুলি চলে, তাই transform transform অ্যানিমেশন পারফরম্যান্সের জন্য তারা ভাল।

এই নতুন বৈশিষ্ট্যগুলি will-change সম্পত্তির সাথেও কাজ করে। সাধারণভাবে, ন্যূনতম সংখ্যক উপাদানের প্রয়োজনে এবং যতটা সম্ভব যুক্তিসঙ্গতভাবে অল্প সময়ের জন্য ব্যবহার করে will-change অত্যধিক ব্যবহার এড়ানো ভাল। তবে যতটা সম্ভব নির্দিষ্ট হওয়াও ভাল। উদাহরণস্বরূপ, আপনি যদি rotate এবং filter বৈশিষ্ট্যগুলির সাথে একটি অ্যানিমেশন অপ্টিমাইজ করতে will-change ব্যবহার করছেন, তাহলে আপনার will-change: rotate, filter । will-change: transform, filter এমন ক্ষেত্রে যেখানে আপনি অ্যানিমেটিং rotate এবং filter করছেন, কারণ কিছু ডেটা স্ট্রাকচার যা Chrome আগে থেকে তৈরি করে যখন আপনি will-change ব্যবহার করেন তখন transform বনাম rotate জন্য আলাদা।

নতুন ইন্টারঅপারেবল সিরিজের অংশ