CSS में त्रिकोणमितीय फ़ंक्शन

CSS में साइन, कोसाइन, टेंगेंट वगैरह का हिसाब लगाना.

Bramus

त्रिकोणमितीय फ़ंक्शन

सीएसएस में गणितीय एक्सप्रेशन लिखे जा सकते हैं. कैलकुलेशन करने के लिए, सबसे नीचे calc() फ़ंक्शन होता है. हालांकि, हो सकता है कि आपने min(), max(), और clamp() के बारे में भी सुना हो.

इन फ़ंक्शन में त्रिकोणमितीय फ़ंक्शन sin(), cos(), tan(), asin(), acos(), atan(), और atan2() शामिल हैं. इन फ़ंक्शन को सीएसएस वैल्यू और यूनिट मॉड्यूल लेवल 4 में तय किया गया है. ये सभी ब्राउज़र में उपलब्ध हैं.

sin(), cos(), और tan()

त्रिकोणमितीय के तीन मुख्य फ़ंक्शन ये हैं:

• cos(): किसी कोण का कोसाइन दिखाता है. यह वैल्यू -1 और 1 के बीच होती है.
• sin(): किसी कोण का साइन दिखाता है. यह वैल्यू -1 और 1 के बीच होती है.
• tan(): किसी कोण का टैंजेंट (Tan) दिखाता है. यह वैल्यू −∞ और +∞ के बीच होती है.

JavaScript फ़ंक्शन के उलट, ये फ़ंक्शन अपने आर्ग्युमेंट के तौर पर ऐंगल और रेडियन, दोनों को स्वीकार करते हैं.

नीचे दिए गए डेमो में, इन फ़ंक्शन का इस्तेमाल उन लाइनों को खींचने के लिए किया गया है जो सेट --angle के चारों ओर मौजूद त्रिकोण बनाती हैं:

• "हाइपोटेन्यूज़" (पीली लाइन), सर्कल के बीच से लेकर बिंदु तक की लाइन होती है. इसकी लंबाई, सर्कल के --radius के बराबर होती है.
• "आस-पास की" (लाल लाइन), सर्कल के बीच से X-ऐक्सिस के साथ-साथ चलने वाली लाइन होती है. इसकी लंबाई, --radius को --angle के कोसाइन से गुणा करने पर मिलती है.
• "विपरीत" (नीली लाइन), बिंदु के बीच से Y-ऐक्सिस के साथ चलने वाली रेखा होती है. इसकी लंबाई, --radius के साथ --angle के साइन का गुणा करने पर मिली संख्या के बराबर होती है.
• --angle के tan() फ़ंक्शन का इस्तेमाल, बिंदु से X-ऐक्सिस तक हरे रंग की लाइन खींचने के लिए किया जाता है.

asin(), acos(), atan(), और atan2()

sin(), cos(), और tan() के ऐर्क या इनवर्स वैल्यू, क्रमशः asin(), acos(), और atan() हैं. ये फ़ंक्शन, गिनती को उल्टी दिशा में करते हैं: ये अपने आर्ग्युमेंट के तौर पर कोई संख्या लेते हैं और उसके लिए कोण दिखाते हैं.

आखिर में, atan2() फ़ंक्शन है, जो दो आर्ग्युमेंट A और B स्वीकार करता है. यह फ़ंक्शन, पॉज़िटिव X-ऐक्सिस और पॉइंट (B,A) के बीच का कोण दिखाता है.

उदाहरण

इन फ़ंक्शन के कई इस्तेमाल के उदाहरण हैं. यहां कुछ उदाहरण दिए गए हैं.

आइटम को किसी सेंटर पॉइंट के चारों ओर सर्कुलर पाथ पर ले जाना

इस डेमो में, बिंदु एक सेंटर पॉइंट के चारों ओर घूमते हैं. हर बिंदु को उसके केंद्र के चारों ओर घुमाकर, उसे बाहर की ओर ले जाने के बजाय, हर बिंदु को X और Y ऐक्सिस पर ट्रांसलेट किया जाता है. X और Y ऐक्सिस पर दूरियां तय करने के लिए, --angle के cos() और 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() फ़ंक्शन, एक पॉइंट से दूसरे पॉइंट तक के रिलेटिव ऐंगल का हिसाब लगाता है. यह फ़ंक्शन, अपने पैरामीटर के तौर पर कॉमा लगाकर अलग की गई दो वैल्यू स्वीकार करता है: ऑरिजिन 0,0 पर मौजूद ऑरिजिन पॉइंट के हिसाब से, दूसरे पॉइंट की y और x पोज़िशन.

कैलकुलेट की गई वैल्यू की मदद से, एलिमेंट को घुमाया जा सकता है, ताकि वे एक-दूसरे के सामने हों. इसके लिए, अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी का इस्तेमाल करें.

नीचे दिए गए उदाहरण में, बॉक्स को घुमाया गया है, ताकि वे माउस की जगह की ओर हों. माउस की पोज़िशन को JavaScript की मदद से, कस्टम प्रॉपर्टी के साथ सिंक किया जाता है.

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)
          );
}

कम्यूनिटी हाइलाइट

ऐना ट्यूडर की ऐनिमेशन वाली मोबियस स्ट्रिप में दिखाए गए तरीके से, cos() और sin() का इस्तेमाल सिर्फ़ अनुवाद के लिए नहीं किया जा सकता. यहां इनके नतीजे का इस्तेमाल, hsl() कलर फ़ंक्शन के s और l कॉम्पोनेंट में बदलाव करने के लिए किया जाता है.