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

CSS-এ সাইন, কোসাইন, ট্যানজেন্ট এবং আরও অনেক কিছু গণনা করুন।

Bramus

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

CSS-এ গাণিতিক এক্সপ্রেশন লেখা সম্ভব। বেসে calc() ফাংশনটি গণনা করার জন্য বসে, তবে সম্ভবত আপনি min() , max() , এবং clamp() এর কথাও শুনেছেন।

এই ফাংশনগুলির সাথে যোগদান হল ত্রিকোণমিতিক ফাংশনগুলি হল sin() , cos() , tan() , asin() , acos() , atan() , এবং atan2() । এই ফাংশনগুলি CSS মান এবং ইউনিট মডিউল লেভেল 4-এ সংজ্ঞায়িত করা হয়েছে এবং সমস্ত ব্রাউজারে উপলব্ধ।

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

মূল তিনটি ট্রিগ ফাংশন হল:

• cos() : একটি কোণের কোসাইন প্রদান করে, যা -1 এবং 1 এর মধ্যে একটি মান।
• sin() : একটি কোণের সাইন প্রদান করে, যা -1 এবং 1 এর মধ্যে একটি মান।
• tan() : একটি কোণের স্পর্শক প্রদান করে, যা −∞ এবং +∞ এর মধ্যে একটি মান।

তাদের জাভাস্ক্রিপ্ট প্রতিরূপের বিপরীতে, এই ফাংশনগুলি তাদের যুক্তি হিসাবে কোণ এবং রেডিয়ান উভয়কেই গ্রহণ করে।

নিম্নলিখিত ডেমোতে, এই ফাংশনগুলিকে লাইন আঁকতে ব্যবহৃত হয় যা সেটের চারপাশে ত্রিভুজ তৈরি করে --angle :

• "হাইপোটেনাস" (হলুদ রেখা) হল বৃত্তের কেন্দ্র থেকে বিন্দুর অবস্থান পর্যন্ত একটি রেখা। এর দৈর্ঘ্য বৃত্তের --radius সমান।
• "সংলগ্ন" (লাল রেখা) হল X-অক্ষ বরাবর বৃত্তের কেন্দ্র থেকে একটি রেখা। এর দৈর্ঘ্য --angle কোসাইন দ্বারা গুণিত --radius সমান।
• "বিপরীত" (নীল রেখা) হল Y-অক্ষ বরাবর বিন্দুর কেন্দ্র থেকে একটি রেখা। এর দৈর্ঘ্য --angle সাইন দ্বারা গুণিত --radius সমান।
• বিন্দু থেকে X-অক্ষের দিকে সবুজ রেখা আঁকতে --angle এর tan() ফাংশন ব্যবহার করা হয়।

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

sin() , cos() এবং tan() এর চাপ বা বিপরীত প্রতিরূপ যথাক্রমে asin() , acos() এবং atan() । এই ফাংশনগুলি বিপরীত দিকে গণনা করে: তারা তাদের যুক্তি হিসাবে একটি সাংখ্যিক মান নেয় এবং এর জন্য সংশ্লিষ্ট কোণ ফেরত দেয়।

অবশেষে atan2() আছে যা A এবং B দুটি আর্গুমেন্ট গ্রহণ করে। ফাংশনটি ধনাত্মক X-অক্ষ এবং বিন্দু (B,A) এর মধ্যে কোণ প্রদান করে।

উদাহরণ

এই ফাংশনগুলির জন্য বিভিন্ন ব্যবহার-ক্ষেত্র রয়েছে। নিম্নলিখিত কি একটি ছোট নির্বাচন.

একটি কেন্দ্রীয় পয়েন্টের চারপাশে একটি বৃত্তাকার পথে আইটেমগুলি সরান

নিম্নলিখিত ডেমোতে, বিন্দুগুলি একটি কেন্দ্রীয় বিন্দুর চারপাশে ঘুরছে। প্রতিটি বিন্দুকে তার নিজস্ব কেন্দ্রের চারপাশে ঘোরানোর পরিবর্তে এবং তারপরে এটিকে বাইরের দিকে সরানোর পরিবর্তে, প্রতিটি বিন্দু X এবং Y অক্ষে অনুবাদ করা হয়। X এবং Y অক্ষের দূরত্বগুলি যথাক্রমে cos() এবং যথাক্রমে --angle sin() বিবেচনা করে নির্ধারিত হয়।

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

কেন্দ্রীয় বিন্দুর চারপাশে সমানভাবে বিন্দুগুলি বিতরণ করতে, প্রতিটি বিন্দুকে তার nth-child সূচকের উপর ভিত্তি করে একটি অতিরিক্ত অফসেট দেওয়া হয়। উদাহরণস্বরূপ, যদি তিনটি বিন্দু থাকে, প্রতিটি বিন্দুর মধ্যে 120deg (= 360deg / 3 ) দূরত্ব থাকে।

• তিনটির মধ্যে প্রথম শিশু উপাদানটি 0 x 120deg = 0deg দ্বারা অফসেট হয়।
• তিনটির মধ্যে দ্বিতীয় চাইল্ড এলিমেন্টটি 1 x 120deg = 120deg দ্বারা অফসেট হয়।
• তিনটির মধ্যে তৃতীয় শিশু উপাদানটি 2 x 120deg = 240deg দ্বারা অফসেট হয়ে যায়।

একটি উপাদানের উৎপত্তির মুখোমুখি হতে ঘোরান

atan2() ফাংশন এক বিন্দু থেকে অন্য বিন্দুতে আপেক্ষিক কোণ গণনা করে। ফাংশনটি তার পরামিতি হিসাবে দুটি কমা-বিচ্ছিন্ন মান গ্রহণ করে: অন্য বিন্দুর y এবং x অবস্থান, মূল বিন্দুর সাথে আপেক্ষিক যা মূল 0,0 এ বসে।

গণনা করা মান দিয়ে উপাদানগুলিকে ঘোরানো সম্ভব যাতে তারা একে অপরের মুখোমুখি হয়, স্বতন্ত্র রূপান্তর বৈশিষ্ট্যগুলি ব্যবহার করে৷

নিম্নলিখিত উদাহরণে, বাক্সগুলি ঘোরানো হয় যাতে তারা মাউসের অবস্থানের মুখোমুখি হয়। মাউসের অবস্থান জাভাস্ক্রিপ্টের মাধ্যমে একটি কাস্টম সম্পত্তিতে সিঙ্ক করা হয়।

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

সম্প্রদায় হাইলাইট

Ana Tudor দ্বারা এই অ্যানিমেটেড Möbius স্ট্রিপে প্রদর্শিত হিসাবে, cos() এবং sin() শুধুমাত্র অনুবাদের জন্য ব্যবহার করা যেতে পারে। এখানে তাদের ফলাফল hsl() রঙ ফাংশনের s এবং l উপাদানগুলিকে ম্যানিপুলেট করতে ব্যবহৃত হয়।