ফাংশন

bookmark_border সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

CSS পডকাস্ট - 020: ফাংশন

এখন পর্যন্ত এই কোর্সে, আপনি বেশ কয়েকটি CSS ফাংশনের সংস্পর্শে এসেছেন। গ্রিড মডিউলে, আপনাকে minmax() এবং fit-content() এর সাথে পরিচয় করিয়ে দেওয়া হয়েছে, যা আপনাকে উপাদানের আকার দিতে সাহায্য করে। রঙ মডিউলে, আপনাকে rgb() , এবং hsl() এর সাথে পরিচয় করিয়ে দেওয়া হয়েছে, যা আপনাকে রং নির্ধারণ করতে সাহায্য করে।

অন্যান্য অনেক প্রোগ্রামিং ল্যাঙ্গুয়েজের মতো, CSS-এর অনেকগুলি অন্তর্নির্মিত ফাংশন রয়েছে যা আপনি যখনই প্রয়োজন তখন অ্যাক্সেস করতে পারেন।

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

একটি ফাংশন কি?

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

অনেক CSS ফাংশন বিশুদ্ধ ফাংশন , যার মানে হল যে আপনি যদি তাদের মধ্যে একই আর্গুমেন্ট পাস করেন, তাহলে আপনার বাকি কোডে যা ঘটছে তা নির্বিশেষে তারা আপনাকে সবসময় একই ফলাফল দেবে। এই ফাংশনগুলি প্রায়শই আপনার CSS-এ মান পরিবর্তনের সাথে সাথে পুনরায় গণনা করবে, ভাষার অন্যান্য উপাদানের মতো, যেমন কম্পিউটেড ক্যাসকেডেড মান যেমন currentColor ।

CSS-এ, আপনি নিজের লেখার পরিবর্তে শুধুমাত্র প্রদত্ত ফাংশনগুলি ব্যবহার করতে পারেন, তবে ফাংশনগুলিকে আরও নমনীয়তা প্রদান করে কিছু প্রসঙ্গে একে অপরের মধ্যে নেস্ট করা যেতে পারে। আমরা পরে এই মডিউলে আরো বিস্তারিতভাবে তা কভার করব।

কার্যকরী নির্বাচক

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

আপনি সিউডো-ক্লাস মডিউলে কার্যকরী নির্বাচকদের সম্পর্কে শিখেছেন যা বিস্তারিত ফাংশন যেমন :is() এবং :not() । এই ফাংশনগুলিতে পাস করা আর্গুমেন্টগুলি হল CSS নির্বাচক, যেগুলি পরে মূল্যায়ন করা হয়। উপাদানগুলির সাথে মিল থাকলে, বাকি CSS নিয়ম তাদের জন্য প্রয়োগ করা হবে।

কাস্টম বৈশিষ্ট্য এবং var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

একটি কাস্টম প্রপার্টি হল একটি ভেরিয়েবল যা আপনাকে আপনার CSS কোডে মান টোকেনাইজ করতে দেয়। কাস্টম বৈশিষ্ট্যগুলিও ক্যাসকেড দ্বারা প্রভাবিত হয় যার অর্থ সেগুলি প্রাসঙ্গিকভাবে ম্যানিপুলেট বা পুনরায় সংজ্ঞায়িত করা যেতে পারে। একটি কাস্টম সম্পত্তি অবশ্যই দুটি ড্যাশ ( -- ) সহ প্রিফিক্স করা উচিত এবং কেস সংবেদনশীল।

var() ফাংশনটি একটি প্রয়োজনীয় আর্গুমেন্ট নেয়: কাস্টম সম্পত্তি যা আপনি একটি মান হিসাবে ফেরত দেওয়ার চেষ্টা করছেন।

পূর্ববর্তী স্নিপেটে, var() ফাংশন --base-color একটি আর্গুমেন্ট হিসাবে পাস করেছে। যদি --base-color সংজ্ঞায়িত করা হয়, তাহলে var() মান প্রদান করবে।

.my-element {
    background: var(--base-color, hotpink);
}

আপনি var() ফাংশনে একটি ফলব্যাক ঘোষণা মানও পাস করতে পারেন। এর মানে হল যদি --base-color খুঁজে পাওয়া না যায়, তাহলে পাস করা ঘোষণাটি ব্যবহার করা হবে, যা এই নমুনার ক্ষেত্রে hotpink রঙ।

ফাংশন যা একটি মান প্রদান করে

var() ফাংশন হল CSS ফাংশনগুলির মধ্যে একটি যা একটি মান প্রদান করে। attr() এবং url() এর মতো ফাংশনগুলি var() এর অনুরূপ কাঠামো অনুসরণ করে — আপনি এক বা একাধিক আর্গুমেন্ট পাস করেন এবং আপনার CSS ঘোষণার ডানদিকে ব্যবহার করেন।

a::after {
  content: attr(href);
}

এখানে attr() ফাংশনটি <a> এলিমেন্টের href অ্যাট্রিবিউটের বিষয়বস্তু গ্রহণ করছে এবং এটিকে ::after সিউডো-এলিমেন্টের content হিসেবে সেট করছে। যদি <a> উপাদানের href অ্যাট্রিবিউটের মান পরিবর্তন করা হয়, তাহলে এটি স্বয়ংক্রিয়ভাবে এই content বৈশিষ্ট্যে প্রতিফলিত হবে।

.my-element {
    background-image: url('/path/to/image.jpg');
}

url() ফাংশন একটি স্ট্রিং URL নেয় এবং ছবি, ফন্ট এবং বিষয়বস্তু লোড করতে ব্যবহৃত হয়। যদি একটি বৈধ ইউআরএল পাস না করা হয় বা ইউআরএল নির্দেশ করে এমন সংস্থান খুঁজে না পাওয়া যায়, তাহলে url() ফাংশন দ্বারা কিছুই ফেরত দেওয়া হবে না।

রঙ ফাংশন

আপনি রঙ মডিউল মধ্যে রঙ ফাংশন সম্পর্কে সব শিখেছি. আপনি যদি এখনও এটি না পড়ে থাকেন তবে এটি দৃঢ়ভাবে সুপারিশ করা হয় যে আপনি এটি করবেন।

CSS-এ কিছু উপলব্ধ রঙ ফাংশন হল rgb() , hsl() , lab() , lch() , oklab() , oklch() , এবং color() । এই সবগুলির একটি অনুরূপ ফর্ম রয়েছে যেখানে কনফিগারেশন আর্গুমেন্টগুলি পাস করা হয় এবং একটি রঙ ফেরত দেওয়া হয়।

গাণিতিক অভিব্যক্তি

অন্যান্য অনেক প্রোগ্রামিং ভাষার মতো, CSS বিভিন্ন ধরনের গণনার সাথে সহায়তা করার জন্য দরকারী গাণিতিক ফাংশন প্রদান করে।

পাটিগণিত ফাংশন

calc()

calc() ফাংশনটি তার প্যারামিটার হিসাবে একটি একক গাণিতিক অভিব্যক্তি নেয়। এই গাণিতিক অভিব্যক্তিটি দৈর্ঘ্য, সংখ্যা, কোণ এবং ফ্রিকোয়েন্সির মতো ধরণের মিশ্রণ হতে পারে। ইউনিটগুলিও মিশ্রিত করা যেতে পারে।

.my-element {
    width: calc(100% - 2rem);
}

এই উদাহরণে, calc() ফাংশনটি একটি এলিমেন্টের প্রস্থকে 100% এর প্যারেন্ট এলিমেন্ট ধারণ করতে ব্যবহার করা হচ্ছে, তারপর সেই গণনা করা মান থেকে 2rem সরিয়ে দেওয়া হচ্ছে।

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

calc() ফাংশন অন্য calc() ফাংশনের ভিতরে নেস্ট করা যেতে পারে। আপনি একটি অভিব্যক্তির অংশ হিসাবে একটি var() ফাংশনে কাস্টম বৈশিষ্ট্যগুলিও পাস করতে পারেন।

min() এবং max()

min() ফাংশন এক বা একাধিক পাস করা আর্গুমেন্টের ক্ষুদ্রতম গণনাকৃত মান প্রদান করে। max() ফাংশন বিপরীতটি করে: এক বা একাধিক পাস করা আর্গুমেন্টের সবচেয়ে বড় মান পান।

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

এই উদাহরণে, প্রস্থ 20vw এর মধ্যে সবচেয়ে ছোট মান হওয়া উচিত —যা ভিউপোর্ট প্রস্থের 20% —এবং 30rem । উচ্চতা 20vh - যা ভিউপোর্ট উচ্চতার 20% - এবং 20rem মধ্যে সবচেয়ে বড় মান হওয়া উচিত।

clamp()

clamp() ফাংশনটি তিনটি আর্গুমেন্ট নেয়: সর্বনিম্ন আকার, আদর্শ আকার এবং সর্বোচ্চ।

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

এই উদাহরণে, font-size ভিউপোর্টের প্রস্থের উপর ভিত্তি করে তরল হবে। স্ক্রীন জুমিংয়ে সহায়তা করার জন্য একটি rem ইউনিটে vw ইউনিট যোগ করা হয়েছে, কারণ জুম স্তর নির্বিশেষে একটি vw ইউনিট একই আকারের হবে। একটি rem ইউনিট দ্বারা গুণ করা - রুট ফন্টের আকারের উপর ভিত্তি করে - একটি আপেক্ষিক গণনা বিন্দু সহ clamp() ফাংশন প্রদান করে।

আপনি এই ফাংশনগুলির উপর এই নিবন্ধে min() , max() , এবং clamp () ফাংশন সম্পর্কে আরও শিখতে পারেন।

ত্রিকোণমিতিক ফাংশন

ত্রিকোণমিতিক ফাংশনগুলি আপনাকে একটি কোণের উপর ভিত্তি করে একটি বৃত্তের যেকোনো বিন্দু খুঁজে পেতে দেয়, চক্রীয় ঘটনা যেমন শব্দ তরঙ্গের মডেল, কক্ষপথের বর্ণনা এবং আরও অনেক কিছু। CSS-এ, আপনি ত্রিকোণমিতিক ফাংশন ব্যবহার করতে পারেন ঘূর্ণন, সময় অ্যানিমেশন, একটি বিন্দুর উপর ভিত্তি করে উপাদান ঘোরান এবং অন্যান্য ব্যবহারের উপর ভিত্তি করে বৈশিষ্ট্য সেট করতে।

আরও তথ্য এবং উদাহরণের জন্য, ত্রিকোণমিতিক ফাংশন সম্পর্কিত আমাদের নিবন্ধটি দেখুন।

sin() , cos() , এবং tan()

sin() , cos() , এবং tan() ফাংশনগুলি একটি কোণ আর্গুমেন্ট নেয় এবং যথাক্রমে sine, cosine এবং tangent ফেরত দেয়। sin() এবং cos() ফাংশন -1 এবং 1 মধ্যে একটি সংখ্যা প্রদান করে। tan() ফাংশন -Infinity এবং +Infinity মধ্যে একটি সংখ্যা প্রদান করে। কোণ যুক্তি যেকোনো সমর্থিত কোণ একক হতে পারে।

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

পূর্ববর্তী উদাহরণে, --sine-degrees এবং --sine-radians মান একই (এই ক্ষেত্রে 0.7071 )।

পূর্ববর্তী উদাহরণে, sin() এবং cos() ফাংশনগুলি নির্দিষ্ট ব্যাসার্ধ দ্বারা ফলাফলকে গুণ করে x এবং y অক্ষে দোদুল্যমান অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। একবারে উভয় ফাংশন ব্যবহার করা একটি প্রদক্ষিণ অ্যানিমেশনের অনুমতি দেয়। সমস্ত ফাংশন কলের জন্য কোণটিকে মসৃণভাবে অ্যানিমেট করতে আমরা একটি কাস্টম বৈশিষ্ট্য , --angle ব্যবহার করি।

asin() , acos() এবং atan()

asin() , acos() , এবং atan() হল sin() , cos() , এবং tan() ফাংশনের বিপরীত, একটি সংখ্যাকে একটি যুক্তি হিসাবে গ্রহণ করে এবং -90deg এবং 90deg মধ্যে একটি কোণ মান প্রদান করে। asin() এবং acos() ফাংশন -1 এবং 1 মধ্যে একটি সংখ্যা গ্রহণ করে যখন atan() ফাংশন -Infinity এবং +Infinity মধ্যে একটি সংখ্যা গ্রহণ করে।

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

atan2() ফাংশনটি উৎপত্তির সাথে সম্পর্কিত একটি বিন্দুর প্রতিনিধিত্বকারী দুটি আর্গুমেন্ট নেয় এবং সেই বিন্দুতে দিক নির্দেশ করে কোণটি ফেরত দেয়। আপনি একটি নির্দিষ্ট বিন্দু সম্মুখীন উপাদান ঘূর্ণন এটি ব্যবহার করতে পারেন. আর্গুমেন্ট সংখ্যা, আকার একক, বা শতাংশ হতে পারে, কিন্তু উভয় আর্গুমেন্ট উভয় একই ধরনের হতে হবে।

উপরের উদাহরণে atan2() ফাংশনটি ভিউপোর্টের কেন্দ্র এবং বর্তমান মাউসের অবস্থানের মধ্যে কোণ নির্ধারণ করতে ব্যবহৃত হয়। মনে রাখবেন যে y মান হল প্রথম আর্গুমেন্ট, এবং x মান হল দ্বিতীয়। কোণটি তখন "চোখের" কেন্দ্রের সাপেক্ষে "শিক্ষার্থীদের" অবস্থান করতে ব্যবহৃত হয়, তাই তারা মাউসকে অনুসরণ করে।

hypot()

hypot() ফাংশন একটি সমকোণী ত্রিভুজের বাহুর প্রতিনিধিত্বকারী দুটি দৈর্ঘ্যের আর্গুমেন্ট নেয় এবং কর্ণের দৈর্ঘ্য প্রদান করে। আপনি সূচকীয় ফাংশন ব্যবহার করে এটি গণনা করার জন্য একটি শর্টকাট হিসাবে এটি ব্যবহার করতে পারেন। উভয় আর্গুমেন্ট একই ইউনিট টাইপ হতে হবে এবং hypot() একই টাইপ প্রদান করবে।

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

সূচকীয় ফাংশন

pow() এবং exp()

pow() ফাংশন দুটি সাংখ্যিক আর্গুমেন্ট নেয়, বেস এবং সূচক, এবং সূচকের শক্তি দ্বারা বেস বাড়ায়। উভয় আর্গুমেন্ট ইউনিট ছাড়া সংখ্যা হতে হবে. exp() ফাংশনটি একটি একক আর্গুমেন্ট নেয় এবং e এর বেস সহ pow() ফাংশনকে কল করার সমতুল্য।

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

sqrt() ফাংশন একটি সাংখ্যিক আর্গুমেন্ট নেয় এবং এর বর্গমূল প্রদান করে। যুক্তি ইউনিট অন্তর্ভুক্ত করতে পারে না.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

log() ফাংশন একটি সাংখ্যিক মানের লগারিদম প্রদান করে। একটি যুক্তি পাস হলে, এটি প্রাকৃতিক লগারিদম ফিরিয়ে দেবে। যদি একটি দ্বিতীয় আর্গুমেন্ট পাস করা হয়, log() ফাংশন লগারিদমের ভিত্তি হিসাবে দ্বিতীয় আর্গুমেন্ট ব্যবহার করবে।

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

সাইন সম্পর্কিত ফাংশন

abs()

abs() ফাংশন একটি সাংখ্যিক আর্গুমেন্ট নেয় এবং আর্গুমেন্ট মানের পরম (ধনাত্মক) মান প্রদান করে।

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

পূর্ববর্তী উদাহরণে, -1 এর একটি alpha মান স্বচ্ছ পাঠ্যের ফলে, কিন্তু abs() ফাংশন 1 এর পরম মান প্রদান করে, যার ফলে সম্পূর্ণ অস্বচ্ছ পাঠ্য হয়।

sign()

sign() ফাংশন একটি সাংখ্যিক আর্গুমেন্ট নেয় এবং আর্গুমেন্ট চিহ্ন প্রদান করে। ধনাত্মক মান 1 এবং ঋণাত্মক মান -1 প্রদান করে। শূন্য মান 0 প্রদান করে।

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

পূর্ববর্তী উদাহরণে, যদি --value ধনাত্মক হয়, উপরের মানটি হবে 75vh । যদি এটি ঋণাত্মক হয়, তাহলে শীর্ষ মান 25vh হবে। যদি এটি শূন্য হয়, শীর্ষ মান হবে 50vh ।

আকৃতি

clip-path , offset-path এবং shape-outside CSS বৈশিষ্ট্যগুলি আপনার বাক্সটিকে দৃশ্যত ক্লিপ করতে বা চারপাশে প্রবাহিত বিষয়বস্তুর জন্য একটি আকৃতি প্রদান করতে আকারগুলি ব্যবহার করে৷

আকৃতি ফাংশন আছে যা এই উভয় বৈশিষ্ট্যের সাথে ব্যবহার করা যেতে পারে। circle() , ellipse() এবং inset() এর মতো সাধারণ আকারগুলি তাদের আকার দেওয়ার জন্য কনফিগারেশন আর্গুমেন্ট নেয়। আরও জটিল আকার, যেমন polygon() কাস্টম আকৃতি তৈরি করতে X এবং Y অক্ষ মানের কমা দ্বারা পৃথক জোড়া নেয়।

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

polygon() এর মত, একটি path() ফাংশনও রয়েছে যা একটি SVG ফিল নিয়মকে একটি আর্গুমেন্ট হিসেবে নেয়। এটি অত্যন্ত জটিল আকারের জন্য অনুমতি দেয় যা একটি গ্রাফিক্স টুল যেমন ইলাস্ট্রেটর বা ইঙ্কস্কেপে আঁকা যায় এবং তারপরে আপনার CSS-এ কপি করা যায়।

রূপান্তরিত করে

শেষ পর্যন্ত CSS ফাংশনগুলির এই ওভারভিউতে ট্রান্সফর্ম ফাংশনগুলি রয়েছে, যা একটি উপাদানের গভীরতাকে তির্যক, আকার পরিবর্তন এবং এমনকি পরিবর্তন করে। নিম্নলিখিত সমস্ত ফাংশন transform সম্পত্তির সাথে ব্যবহার করা হয়।

ঘূর্ণন

আপনি rotate() ফাংশন ব্যবহার করে একটি উপাদান ঘোরাতে পারেন, যা একটি উপাদানকে তার কেন্দ্র অক্ষে ঘোরাতে পারে। আপনি পরিবর্তে একটি নির্দিষ্ট অক্ষে একটি উপাদান ঘোরাতে rotateX() , rotateY() এবং rotateZ() ফাংশন ব্যবহার করতে পারেন। ঘূর্ণনের মাত্রা নির্ধারণ করতে আপনি ডিগ্রি, টার্ন এবং রেডিয়ান ইউনিট পাস করতে পারেন।

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() ফাংশনটি চারটি আর্গুমেন্ট নেয়।

প্রথম ৩টি আর্গুমেন্ট হল সংখ্যা, যা X, Y এবং Z স্থানাঙ্ককে সংজ্ঞায়িত করে। চতুর্থ যুক্তি হল ঘূর্ণন যা অন্যান্য ঘূর্ণন ফাংশনের মতই ডিগ্রী, কোণ এবং বাঁক গ্রহণ করে।

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

স্কেল

আপনি transform এবং scale() ফাংশন সহ একটি উপাদানের স্কেলিং পরিবর্তন করতে পারেন। ফাংশনটি একটি মান হিসাবে এক বা দুটি সংখ্যা গ্রহণ করে যা একটি ইতিবাচক বা নেতিবাচক স্কেলিং নির্ধারণ করে। যদি আপনি শুধুমাত্র একটি সংখ্যার আর্গুমেন্ট সংজ্ঞায়িত করেন, তাহলে X এবং Y অক্ষ উভয়ই একই স্কেল করা হবে এবং উভয়টিকে সংজ্ঞায়িত করা হল X এবং Y-এর জন্য একটি সংক্ষিপ্ত বিবরণ। ঠিক যেমন rotate() পরিবর্তে একটি নির্দিষ্ট অক্ষের উপর একটি উপাদান স্কেল করার জন্য scaleX() , scaleY() এবং scaleZ() ফাংশন রয়েছে।

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

এছাড়াও rotate ফাংশন মত, একটি scale3d() ফাংশন আছে. এটি scale() এর অনুরূপ, তবে এটি তিনটি আর্গুমেন্ট নেয়: X, Y এবং Z স্কেল ফ্যাক্টর।

অনুবাদ করুন

translate() ফাংশন একটি উপাদানকে স্থানান্তরিত করে যখন এটি নথির প্রবাহে তার অবস্থান বজায় রাখে। তারা আর্গুমেন্ট হিসাবে দৈর্ঘ্য এবং শতাংশ মান গ্রহণ করে। translate() ফাংশনটি X অক্ষ বরাবর একটি উপাদান অনুবাদ করে যদি একটি আর্গুমেন্ট সংজ্ঞায়িত করা হয়, এবং উভয় আর্গুমেন্ট সংজ্ঞায়িত করা হলে X এবং Y অক্ষ বরাবর একটি উপাদান অনুবাদ করে।

.my-element {
  transform: translatex(40px) translatey(25px);
}

আপনি করতে পারেন—অন্যান্য রূপান্তর ফাংশনের মতো—একটি নির্দিষ্ট অক্ষের জন্য নির্দিষ্ট ফাংশন ব্যবহার করতে পারেন, translateX , translateY এবং translateZ ব্যবহার করে। এছাড়াও আপনি translate3d ব্যবহার করতে পারেন যা আপনাকে X, Y এবং Z অনুবাদকে একটি ফাংশনে সংজ্ঞায়িত করতে দেয়।

স্কুইং

আপনি skew() ফাংশন ব্যবহার করে একটি উপাদানকে তিরস্কার করতে পারেন যা কোণকে আর্গুমেন্ট হিসাবে গ্রহণ করে। skew() ফাংশন translate() জন্য খুব অনুরূপ ভাবে কাজ করে। আপনি যদি শুধুমাত্র একটি যুক্তি সংজ্ঞায়িত করেন তবে এটি শুধুমাত্র X অক্ষকে প্রভাবিত করবে এবং যদি আপনি উভয়টি সংজ্ঞায়িত করেন তবে এটি X এবং Y অক্ষকে প্রভাবিত করবে। প্রতিটি অক্ষকে স্বাধীনভাবে প্রভাবিত করতে আপনি skewX এবং skewY ব্যবহার করতে পারেন।

.my-element {
  transform: skew(10deg);
}

দৃষ্টিকোণ

পরিশেষে, আপনি perspective সম্পত্তি ব্যবহার করতে পারেন — যা বৈশিষ্ট্যের রূপান্তর পরিবারের অংশ—ব্যবহারকারী এবং Z সমতলের মধ্যে দূরত্ব পরিবর্তন করতে। এটি দূরত্বের অনুভূতি দেয় এবং আপনার ডিজাইনে ক্ষেত্রের গভীরতা তৈরি করতে ব্যবহার করা যেতে পারে।

ডেভিড ডেসান্ড্রোর এই উদাহরণটি, তাদের খুব দরকারী নিবন্ধ থেকে, দেখায় যে এটি কীভাবে ব্যবহার করা যেতে পারে, perspective-origin-x এবং perspective-origin-y বৈশিষ্ট্য সহ সত্যিকারের 3D অভিজ্ঞতা তৈরি করতে।

অ্যানিমেশন ফাংশন, গ্রেডিয়েন্ট এবং ফিল্টার

CSS এমন ফাংশনগুলিও সরবরাহ করে যা আপনাকে উপাদানগুলিকে অ্যানিমেট করতে সাহায্য করে, সেগুলিতে গ্রেডিয়েন্ট প্রয়োগ করতে এবং তারা দেখতে কেমন তা হেরফের করতে গ্রাফিকাল ফিল্টার ব্যবহার করে৷ এই মডিউলটিকে যতটা সম্ভব সংক্ষিপ্ত রাখতে, সেগুলি সংযুক্ত মডিউলগুলিতে আচ্ছাদিত করা হয়েছে। তারা সকলেই এই মডিউলে প্রদর্শিত ফাংশনের অনুরূপ কাঠামো অনুসরণ করে।

আপনার উপলব্ধি পরীক্ষা করুন

ফাংশন আপনার জ্ঞান পরীক্ষা