सीएसएस में साइन, कोसाइन, टैंजेंट, और अन्य का हिसाब लगाएं.
त्रिकोणमितीय फ़ंक्शन
सीएसएस में, गणितीय एक्सप्रेशन लिखे जा सकते हैं. बेस में कैलकुलेशन करने के लिए 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की साइन (sin) से गुणा करने पर मिली वैल्यू के बराबर है. --angleकेtan()फ़ंक्शन का इस्तेमाल, बिंदु से X-ऐक्सिस की ओर हरी लाइन बनाने के लिए किया जाता है.
asin(), acos(), atan(), और atan2()
sin(), cos(), और tan() के arc या इनवर्स मिलते-जुलते नतीजे, क्रम से asin(), acos(), और atan() हैं. ये फ़ंक्शन उलटी दिशा में कैलकुलेशन करते हैं: वे तर्क के तौर पर संख्या वाली वैल्यू लेते हैं और उसका कोण दिखाते हैं.
आखिर में atan2() है, जो दो तर्क A और B स्वीकार करता है. फ़ंक्शन, पॉज़िटिव X-ऐक्सिस और पॉइंट (B,A) के बीच का ऐंगल रिटर्न करता है.
उदाहरण
इन फ़ंक्शन के कई इस्तेमाल हैं. इसके बाद, यहां एक छोटा सा विकल्प दिया गया है.
आइटम को केंद्रीय बिंदु के चारों ओर वृत्तीय पथ पर ले जाना
नीचे दिए गए डेमो में, ये बिंदु एक ही जगह के मुख्य बिंदु पर घूमते हैं. हर बिंदु को उसके अपने केंद्र के चारों ओर घुमाने और फिर उसे बाहर की ओर ले जाने के बजाय, हर बिंदु को X और Y ऐक्सिस पर बदल दिया जाता है. X और Y ऐक्सिस पर दूरी तय करने के लिए, --angle के sin() और cos() का इस्तेमाल किया जाता है.
: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 कॉम्पोनेंट में बदलाव करने के लिए किया जाता है.