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

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

Bramus

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

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

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

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

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

• cos(): किसी कोण की कोज्या देता है, जो -1 और 1 के बीच का मान होता है.
• sin(): किसी कोण की ज्या देता है, जो -1 और 1 के बीच का मान होता है.
• tan(): किसी कोण की स्पर्शज्या देता है, जो −∞ और +∞ के बीच का मान होता है.

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

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

• "कर्ण" (पीली लाइन), सर्कल के बीच से बिंदु की जगह तक की एक लाइन होती है. इसकी लंबाई, सर्कल के --radius के बराबर है.
• "आस-पास" (लाल लाइन) X-ऐक्सिस पर सर्कल के बीच से आने वाली लाइन है. इसकी लंबाई, --radius को --angle की कोसाइन (cos) से गुणा करने पर मिलती है.
• "विपरीत" (नीली लाइन) 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 ऐक्सिस की दूरी, 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() फ़ंक्शन एक बिंदु से दूसरे बिंदु के सापेक्ष कोण की गणना करता है. यह फ़ंक्शन, कॉमा लगाकर अलग की गई दो वैल्यू को अपने पैरामीटर के तौर पर स्वीकार करता है: ऑरिजिन 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 कॉम्पोनेंट में बदलाव करने के लिए किया जाता है.