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 कॉम्पोनेंट में बदलाव करने के लिए किया जाता है.