फ़ंक्शन

bookmark_border संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

सीएसएस पॉडकास्ट - 020: फ़ंक्शन

इस कोर्स में अब तक, आपको सीएसएस के कई फ़ंक्शन के बारे में जानकारी दी गई है. ग्रिड मॉड्यूल में, आपको minmax() और fit-content() के बारे में बताया गया था. इनकी मदद से, एलिमेंट का साइज़ तय किया जा सकता है. रंग मॉड्यूल में, आपको rgb() और hsl() के बारे में बताया गया था. इनकी मदद से, रंग तय किए जा सकते हैं.

कई अन्य प्रोग्रामिंग भाषाओं की तरह, सीएसएस में बहुत फ़ंक्शन पहले से मौजूद होते हैं. इन्हें ज़रूरत पड़ने पर ऐक्सेस किया जा सकता है.

हर CSS फ़ंक्शन का एक खास मकसद होता है. इस लेसन में, आपको इन फ़ंक्शन के बारे में खास जानकारी मिलेगी. इससे, आपको यह समझने में मदद मिलेगी कि इनका इस्तेमाल कहां और कैसे किया जा सकता है.

फ़ंक्शन क्या होता है?

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

कई सीएसएस फ़ंक्शन प्योर फ़ंक्शन होते हैं. इसका मतलब है कि अगर उनमें एक जैसे आर्ग्युमेंट डाले जाते हैं, तो वे हमेशा एक ही नतीजा देंगे. भले ही, आपके बाकी कोड में कुछ भी हो रहा हो. आपकी सीएसएस में वैल्यू बदलने पर, ये फ़ंक्शन अक्सर फिर से कैलकुलेट होंगे. ये फ़ंक्शन, भाषा के अन्य एलिमेंट की तरह ही काम करते हैं. जैसे, currentColor जैसी कैलकुलेट की गई कैस्केड वैल्यू.

सीएसएस में, अपने फ़ंक्शन लिखने के बजाय, सिर्फ़ दिए गए फ़ंक्शन का इस्तेमाल किया जा सकता है. हालांकि, कुछ मामलों में फ़ंक्शन को एक-दूसरे में नेस्ट किया जा सकता है, जिससे उन्हें ज़्यादा सुविधा मिलती है. हम इस बारे में ज़्यादा जानकारी, इस मॉड्यूल में आगे देंगे.

फ़ंक्शनल सिलेक्टर

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

आपने स्यूडो-क्लास मॉड्यूल में फ़ंक्शनल सेलेक्टर के बारे में जाना है. इसमें :is() और :not() जैसे फ़ंक्शन के बारे में बताया गया है. इन फ़ंक्शन में पास किए गए आर्ग्युमेंट, सीएसएस सिलेक्टर होते हैं. इसके बाद, इनका आकलन किया जाता है. अगर एलिमेंट मैच करते हैं, तो उन पर सीएसएस नियम का बाकी हिस्सा लागू होगा.

कस्टम प्रॉपर्टी और var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

कस्टम प्रॉपर्टी एक वैरिएबल होती है, जिसकी मदद से सीएसएस कोड में वैल्यू को टोकन में बदला जा सकता है. कस्टम प्रॉपर्टी पर भी कैस्केड का असर पड़ता है. इसका मतलब है कि उनमें कॉन्टेक्स्ट के हिसाब से बदलाव किया जा सकता है या उन्हें फिर से तय किया जा सकता है. कस्टम प्रॉपर्टी की शुरुआत दो डैश (--) से होनी चाहिए. साथ ही, यह केस-सेंसिटिव होती है.

var() फ़ंक्शन में एक ज़रूरी आर्ग्युमेंट होता है: वह कस्टम प्रॉपर्टी जिसे वैल्यू के तौर पर दिखाना है.

पिछले स्निपेट में, var() फ़ंक्शन में --base-color को आर्ग्युमेंट के तौर पर पास किया गया है. अगर --base-color तय किया गया है, तो var() वैल्यू दिखाएगा.

.my-element {
    background: var(--base-color, hotpink);
}

var() फ़ंक्शन में, फ़ॉलबैक एलान की वैल्यू भी दी जा सकती है. इसका मतलब है कि अगर --base-color नहीं मिलता है, तो इसके बजाय पास किए गए एलान का इस्तेमाल किया जाएगा. इस सैंपल के मामले में, यह hotpink रंग है.

वैल्यू दिखाने वाले फ़ंक्शन

var() फ़ंक्शन, वैल्यू दिखाने वाले CSS फ़ंक्शन में से एक है. attr() और url() जैसे फ़ंक्शन, var() जैसे ही स्ट्रक्चर का इस्तेमाल करते हैं— आपको एक या उससे ज़्यादा आर्ग्युमेंट पास करने होते हैं और उनका इस्तेमाल अपनी सीएसएस के एलान के दाईं ओर किया जाता है.

a::after {
  content: attr(href);
}

यहां attr() फ़ंक्शन, <a> एलिमेंट के href एट्रिब्यूट का कॉन्टेंट ले रहा है और उसे ::after स्यूडो-एलिमेंट के content के तौर पर सेट कर रहा है. अगर <a> एलिमेंट के href एट्रिब्यूट की वैल्यू बदलती है, तो यह content एट्रिब्यूट में अपने-आप दिखेगी.

.my-element {
    background-image: url('/path/to/image.jpg');
}

url() फ़ंक्शन में स्ट्रिंग यूआरएल डाला जाता है. इसका इस्तेमाल इमेज, फ़ॉन्ट, और कॉन्टेंट लोड करने के लिए किया जाता है. अगर कोई मान्य यूआरएल नहीं दिया गया है या यूआरएल जिस संसाधन पर ले जाता है वह नहीं मिलता है, तो url() फ़ंक्शन से कुछ भी नहीं मिलेगा.

कलर फ़ंक्शन

आपने रंग मॉड्यूल में, रंग फ़ंक्शन के बारे में पूरी जानकारी हासिल की है. अगर आपने अब तक वह लेख नहीं पढ़ा है, तो हमारा सुझाव है कि आप उसे ज़रूर पढ़ें.

सीएसएस में उपलब्ध कुछ रंग फ़ंक्शन ये हैं: rgb(), hsl(), lab(), lch(), oklab(), oklch(), और color(). इन सभी का फ़ॉर्म एक जैसा होता है, जिसमें कॉन्फ़िगरेशन के आर्ग्युमेंट पास किए जाते हैं और रंग वापस मिलता है.

मैथमैटिकल एक्सप्रेशन

कई अन्य प्रोग्रामिंग भाषाओं की तरह, CSS भी गणित से जुड़े कामों के लिए फ़ंक्शन उपलब्ध कराती है.

अंकगणितीय फ़ंक्शन

calc()

calc() फ़ंक्शन, पैरामीटर के तौर पर एक ही मैथमैटिकल एक्सप्रेशन लेता है. यह गणितीय एक्सप्रेशन, कई तरह का हो सकता है. जैसे, लंबाई, संख्या, कोण, और फ़्रीक्वेंसी. अलग-अलग इकाइयों का इस्तेमाल भी किया जा सकता है.

.my-element {
    width: calc(100% - 2rem);
}

इस उदाहरण में, calc() फ़ंक्शन का इस्तेमाल किसी एलिमेंट की चौड़ाई को उसके पैरंट एलिमेंट के 100% के तौर पर तय करने के लिए किया जा रहा है. इसके बाद, उस एलिमेंट की चौड़ाई से 2rem को हटा दिया गया है.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

calc() फ़ंक्शन को किसी दूसरे calc() फ़ंक्शन में नेस्ट किया जा सकता है. एक्सप्रेशन के हिस्से के तौर पर, var() फ़ंक्शन में कस्टम प्रॉपर्टी भी पास की जा सकती हैं.

min() और max()

min() फ़ंक्शन, एक या उससे ज़्यादा दिए गए आर्ग्युमेंट की सबसे छोटी वैल्यू दिखाता है. max() फ़ंक्शन, इसके उलट काम करता है: एक या उससे ज़्यादा आर्ग्युमेंट की सबसे बड़ी वैल्यू दिखाता है.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

इस उदाहरण में, चौड़ाई 20vw और 30rem के बीच की सबसे छोटी वैल्यू होनी चाहिए. 20vw, विंडो की चौड़ाई का 20% होता है. ऊंचाई, 20vh और 20rem के बीच की सबसे बड़ी वैल्यू होनी चाहिए. 20vh, व्यूपोर्ट की ऊंचाई का 20% होता है.

clamp()

clamp() फ़ंक्शन में तीन आर्ग्युमेंट इस्तेमाल किए जाते हैं: कम से कम साइज़, सबसे सही साइज़, और ज़्यादा से ज़्यादा साइज़.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

इस उदाहरण में, font-size व्यूपोर्ट की चौड़ाई के आधार पर फ़्ल्यूइड होगा. vw यूनिट को rem यूनिट में जोड़ा जाता है, ताकि स्क्रीन को ज़ूम करने में मदद मिल सके. ऐसा इसलिए किया जाता है, क्योंकि ज़ूम लेवल चाहे जो भी हो, vw यूनिट का साइज़ एक ही रहेगा. रूट फ़ॉन्ट साइज़ के आधार पर, rem यूनिट से गुणा करने पर, clamp() फ़ंक्शन को रिलेटिव कैलकुलेशन पॉइंट मिलता है.

min(), max(), और clamp() फ़ंक्शन के बारे में ज़्यादा जानने के लिए, इन फ़ंक्शन के बारे में यह लेख पढ़ें.

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

त्रिकोणमितीय फ़ंक्शन की मदद से, किसी कोण के आधार पर सर्कल पर कोई भी बिंदु ढूंढा जा सकता है. साथ ही, इनकी मदद से, ध्वनि तरंगों जैसे चक्रीय घटनाओं का मॉडल बनाया जा सकता है, कक्षाओं के बारे में बताया जा सकता है वगैरह. सीएसएस में, रोटेशन, समय के साथ चलने वाले ऐनिमेशन, किसी पॉइंट के आधार पर एलिमेंट को घुमाने, और अन्य कामों के आधार पर प्रॉपर्टी सेट करने के लिए, त्रिकोणमितीय फ़ंक्शन का इस्तेमाल किया जा सकता है.

ज़्यादा जानकारी और उदाहरणों के लिए, त्रिकोणमितीय फ़ंक्शन के बारे में हमारा लेख पढ़ें.

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

sin(), cos(), और tan() फ़ंक्शन, कोण के आर्ग्युमेंट के तौर पर वैल्यू लेते हैं और क्रमशः साइन, कोसाइन, और टैंजेंट दिखाते हैं. sin() और cos() फ़ंक्शन, -1 और 1 के बीच की संख्या दिखाते हैं. tan() फ़ंक्शन, -Infinity और +Infinity के बीच की संख्या दिखाता है. ऐंगल आर्ग्युमेंट के तौर पर, ऐंगल की इस्तेमाल की जा सकने वाली किसी भी यूनिट का इस्तेमाल किया जा सकता है.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

पिछले उदाहरण में, --sine-degrees और --sine-radians की एक ही वैल्यू है (इस मामले में 0.7071).

पिछले उदाहरण में, sin() और cos() फ़ंक्शन का इस्तेमाल करके, x और y अक्षों पर, दिए गए त्रिज्या के साथ नतीजे को गुणा करके, ऑसिलेट करने वाले ऐनिमेशन बनाए गए हैं. दोनों फ़ंक्शन का एक साथ इस्तेमाल करने पर, ऑर्बिटिंग ऐनिमेशन मिलता है. हम सभी फ़ंक्शन कॉल के लिए ऐंगल को आसानी से ऐनिमेट करने के लिए, कस्टम प्रॉपर्टी, --angle का इस्तेमाल करते हैं.

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

asin(), acos(), और atan(), sin(), cos(), और tan() फ़ंक्शन के उलट होते हैं. ये फ़ंक्शन किसी संख्या को आर्ग्युमेंट के तौर पर लेते हैं और -90deg और 90deg के बीच के कोण की वैल्यू दिखाते हैं. asin() और acos() फ़ंक्शन, -1 और 1 के बीच की संख्या स्वीकार करते हैं. वहीं, atan() फ़ंक्शन, -Infinity और +Infinity के बीच की संख्या स्वीकार करता है.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

atan2() फ़ंक्शन, ऑरिजिन के हिसाब से किसी पॉइंट को दिखाने वाले दो आर्ग्युमेंट लेता है. साथ ही, उस पॉइंट की दिशा दिखाने वाला ऐंगल दिखाता है. इसका इस्तेमाल करके, एलिमेंट को किसी खास पॉइंट पर घुमाया जा सकता है. आर्ग्युमेंट, संख्याएं, साइज़ की इकाइयां या प्रतिशत हो सकते हैं. हालांकि, दोनों आर्ग्युमेंट एक ही तरह के होने चाहिए.

ऊपर दिए गए उदाहरण में, atan2() फ़ंक्शन का इस्तेमाल, व्यूपोर्ट के बीच के ऐंगल और माउस की मौजूदा पोज़िशन का पता लगाने के लिए किया गया है. ध्यान दें कि y वैल्यू पहला आर्ग्युमेंट है और x वैल्यू दूसरा आर्ग्युमेंट है. इसके बाद, इस ऐंगल का इस्तेमाल करके "आंखों" के बीच में "पुतली" की पोज़िशन तय की जाती है, ताकि वे माउस को फ़ॉलो कर सकें.

hypot()

hypot() फ़ंक्शन, लंबाई के दो आर्ग्युमेंट लेता है. ये आर्ग्युमेंट, राइट ट्रैंगल की भुजाओं को दिखाते हैं. साथ ही, यह फ़ंक्शन हाइपोटेन्यूज़ की लंबाई दिखाता है. एक्सपोनेंशियल फ़ंक्शन का इस्तेमाल करके, इसका हिसाब लगाने के लिए, इसका इस्तेमाल शॉर्टकट के तौर पर किया जा सकता है. दोनों आर्ग्युमेंट एक ही तरह की इकाई के होने चाहिए. साथ ही, hypot() भी एक ही तरह की इकाई दिखाएगा.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

घातांकी फ़ंक्शन

pow() और exp()

pow() फ़ंक्शन दो न्यूमेरिक आर्ग्युमेंट लेता है, बेस और एक्सपोनेंट. साथ ही, बेस को एक्सपोनेंट की पावर से बढ़ाता है. दोनों आर्ग्युमेंट, यूनिट के बिना संख्याएं होनी चाहिए. exp() फ़ंक्शन में एक आर्ग्युमेंट डाला जाता है. यह e के आधार पर pow() फ़ंक्शन को कॉल करने के बराबर होता है.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

sqrt() फ़ंक्शन, किसी संख्या को आर्ग्युमेंट के तौर पर लेता है और उसका वर्गमूल दिखाता है. आर्ग्युमेंट में इकाइयां शामिल नहीं की जा सकतीं.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

log() फ़ंक्शन, किसी संख्या वाली वैल्यू का लॉगारिदम दिखाता है. अगर एक आर्ग्युमेंट पास किया जाता है, तो यह नैचुरल लॉगारिद्म दिखाएगा. अगर दूसरा आर्ग्युमेंट पास किया जाता है, तो log() फ़ंक्शन, दूसरे आर्ग्युमेंट का इस्तेमाल लघुगणक के आधार के तौर पर करेगा.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

साइन से जुड़े फ़ंक्शन

abs()

abs() फ़ंक्शन, कोई अंकों वाला आर्ग्युमेंट लेता है और आर्ग्युमेंट की वैल्यू की ऐब्सलूट (पॉज़िटिव) वैल्यू दिखाता है.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

पिछले उदाहरण में, -1 की alpha वैल्यू से पारदर्शी टेक्स्ट दिखेगा. हालांकि, abs() फ़ंक्शन 1 की एब्सोल्यूट वैल्यू दिखाता है, जिससे पूरी तरह से अपारदर्शी टेक्स्ट दिखता है.

sign()

sign() फ़ंक्शन, संख्या के तौर पर दिए गए आर्ग्युमेंट को स्वीकार करता है और आर्ग्युमेंट का चिह्न दिखाता है. पॉज़िटिव वैल्यू के लिए 1 और नेगेटिव वैल्यू के लिए -1 दिखता है. शून्य वैल्यू के लिए, 0 दिखता है.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

ऊपर दिए गए उदाहरणों में, अगर --value की वैल्यू पॉज़िटिव है, तो सबसे ऊपर वाली वैल्यू 75vh होगी. अगर यह वैल्यू नेगेटिव है, तो सबसे ऊपर मौजूद वैल्यू 25vh होगी. अगर यह शून्य है, तो सबसे ऊपर की वैल्यू 50vh होगी.

आकार

clip-path, offset-path, और shape-outside वाली सीएसएस प्रॉपर्टी, आपके बॉक्स को विज़ुअल तौर पर क्लिप करने या कॉन्टेंट के लिए कोई आकार देने के लिए आकारों का इस्तेमाल करती हैं.

ऐसे शेप फ़ंक्शन हैं जिनका इस्तेमाल इन दोनों प्रॉपर्टी के साथ किया जा सकता है. circle(), ellipse(), और inset() जैसे आसान आकार का साइज़ तय करने के लिए, कॉन्फ़िगरेशन आर्ग्युमेंट का इस्तेमाल किया जाता है. ज़्यादा जटिल आकार, जैसे कि polygon() कस्टम आकार बनाने के लिए, X और Y ऐक्सिस की वैल्यू के कॉमा से अलग किए गए पेयर का इस्तेमाल करते हैं.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

polygon() की तरह ही, path() फ़ंक्शन भी होता है. यह आर्ग्युमेंट के तौर पर SVG फ़िल नियम लेता है. इसकी मदद से, Illustrator या Inkscape जैसे ग्राफ़िक टूल में बहुत जटिल आकार बनाए जा सकते हैं. इसके बाद, उन्हें अपनी सीएसएस में कॉपी किया जा सकता है.

रूपांतरण

आखिर में, CSS फ़ंक्शन की खास जानकारी में ट्रांसफ़ॉर्म फ़ंक्शन शामिल हैं. ये फ़ंक्शन किसी एलिमेंट को तिरछा करते हैं, उसका साइज़ बदलते हैं, और उसकी गहराई भी बदलते हैं. यहां दिए गए सभी फ़ंक्शन का इस्तेमाल, transform प्रॉपर्टी के साथ किया जाता है.

घुमाव

rotate() फ़ंक्शन का इस्तेमाल करके, किसी एलिमेंट को घुमाया जा सकता है. इससे एलिमेंट अपने सेंटर ऐक्सिस पर घूमेगा. किसी एलिमेंट को किसी खास अक्ष पर घुमाने के लिए, rotateX(), rotateY(), और rotateZ() फ़ंक्शन का भी इस्तेमाल किया जा सकता है. घुमाव के लेवल का पता लगाने के लिए, डिग्री, टर्न, और रेडियन यूनिट इस्तेमाल की जा सकती हैं.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() फ़ंक्शन में चार आर्ग्युमेंट इस्तेमाल किए जाते हैं.

पहले तीन आर्ग्युमेंट संख्याएं होती हैं, जो X, Y, और Z कोऑर्डिनेट तय करती हैं. चौथा आर्ग्युमेंट रोटेशन है, जो रोटेशन के दूसरे फ़ंक्शन की तरह ही डिग्री, ऐंगल, और टर्न स्वीकार करता है.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

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

स्केल

transform और scale() फ़ंक्शन की मदद से, किसी एलिमेंट की स्केलिंग बदली जा सकती है. यह फ़ंक्शन वैल्यू के तौर पर एक या दो संख्याएं स्वीकार करता है. इनसे यह तय होता है कि स्केलिंग पॉज़िटिव है या नेगेटिव. अगर सिर्फ़ एक संख्या वाला आर्ग्युमेंट तय किया जाता है, तो X और Y, दोनों ऐक्सिस का स्केल एक जैसा होगा. साथ ही, दोनों को तय करना, X और Y के लिए शॉर्टहैंड है. rotate() की तरह ही, किसी एलिमेंट को किसी खास अक्ष पर स्केल करने के लिए, scaleX(), scaleY(), और scaleZ() फ़ंक्शन भी होते हैं.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

rotate फ़ंक्शन की तरह ही, एक scale3d() फ़ंक्शन भी है. यह scale() जैसा ही है, लेकिन इसमें तीन आर्ग्युमेंट होते हैं: X, Y, और Z स्केल फ़ैक्टर.

किसी एलिमेंट को स्केल करने के लिए, अलग-अलग scale प्रॉपर्टी का इस्तेमाल किया जा सकता है. transform प्रॉपर्टी के बाहर इस्तेमाल करने पर, इसे अन्य ट्रांसफ़ॉर्मेशन से अलग ट्रांज़िशन किया जा सकता है.

अनुवाद करें

translate() फ़ंक्शन, दस्तावेज़ के फ़्लो में अपनी जगह बनाए रखते हुए, किसी एलिमेंट को एक जगह से दूसरी जगह ले जाते हैं. ये लंबाई और प्रतिशत वैल्यू को आर्ग्युमेंट के तौर पर स्वीकार करते हैं. अगर एक आर्ग्युमेंट तय किया गया है, तो translate() फ़ंक्शन किसी एलिमेंट को X-ऐक्सिस के साथ ट्रांसलेट करता है. अगर दोनों आर्ग्युमेंट तय किए गए हैं, तो यह एलिमेंट को X और Y-ऐक्सिस के साथ ट्रांसलेट करता है.

.my-element {
  transform: translatex(40px) translatey(25px);
}

किसी खास ऐक्सिस के लिए, अन्य ट्रांसफ़ॉर्म फ़ंक्शन की तरह ही खास फ़ंक्शन का इस्तेमाल किया जा सकता है. इसके लिए, translateX, translateY, और translateZ का इस्तेमाल करें. translate3d का इस्तेमाल भी किया जा सकता है. इससे, एक फ़ंक्शन में X, Y, और Z ट्रांसलेशन तय किया जा सकता है.

scale और rotate की तरह, किसी एलिमेंट को एक से दूसरी जगह ले जाने के लिए, transform प्रॉपर्टी के बाहर translate प्रॉपर्टी का भी इस्तेमाल किया जा सकता है.

.my-element{
  translate: 20px 30px;
}

स्क्यू

skew() फ़ंक्शन का इस्तेमाल करके, किसी एलिमेंट को तिरछा किया जा सकता है. इन फ़ंक्शन में कोण आर्ग्युमेंट के तौर पर इस्तेमाल किए जाते हैं. skew() फ़ंक्शन, translate() फ़ंक्शन की तरह ही काम करता है. अगर सिर्फ़ एक आर्ग्युमेंट तय किया जाता है, तो इसका असर सिर्फ़ X ऐक्सिस पर पड़ेगा. अगर दोनों आर्ग्युमेंट तय किए जाते हैं, तो इसका असर X और Y ऐक्सिस पर पड़ेगा. हर अक्ष पर अलग-अलग असर डालने के लिए, skewX और skewY का भी इस्तेमाल किया जा सकता है.

.my-element {
  transform: skew(10deg);
}

रास्ते की जानकारी

आखिर में, उपयोगकर्ता और Z प्लेन के बीच की दूरी बदलने के लिए, perspective प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह प्रॉपर्टी, ट्रांसफ़ॉर्म फ़ैमिली की प्रॉपर्टी का हिस्सा है. इससे दूरी का एहसास होता है. साथ ही, इसका इस्तेमाल अपने डिज़ाइन में डीप फ़ील्ड बनाने के लिए किया जा सकता है.

डेविड देसैंडो के इस उदाहरण में, perspective-origin-x और perspective-origin-y प्रॉपर्टी के साथ-साथ, 3D अनुभव देने के लिए इस प्रॉपर्टी का इस्तेमाल करने का तरीका बताया गया है.

ऐनिमेशन फ़ंक्शन, ग्रेडिएंट, और फ़िल्टर

सीएसएस में ऐसे फ़ंक्शन भी होते हैं जिनकी मदद से एलिमेंट को ऐनिमेट किया जा सकता है, उन पर ग्रेडिएंट लागू किए जा सकते हैं, और उनके दिखने के तरीके में बदलाव करने के लिए ग्राफ़िकल फ़िल्टर का इस्तेमाल किया जा सकता है. इस मॉड्यूल को जितना हो सके उतना छोटा रखने के लिए, इन विषयों को लिंक किए गए मॉड्यूल में शामिल किया गया है. ये सभी फ़ंक्शन, इस मॉड्यूल में दिखाए गए फ़ंक्शन के जैसे ही होते हैं.

देखें कि आपको क्या समझ आया

फ़ंक्शन के बारे में अपनी जानकारी का टेस्ट करें