CSS 2D ट्रांसफ़ॉर्म

एनिमेटेड वेब एलिमेंट बनाना वेब डिज़ाइन की एक महत्वपूर्ण विशेषता है। उदाहरण के लिए, हो सकता है कि आप एक बटन डिज़ाइन कर रहे हों जिसे आप उपयोगकर्ता द्वारा बटन पर होवर करने पर तिरछा करना चाहते हैं।

यहीं पर सीएसएस ट्रांसफॉर्म प्रॉपर्टी आती है। ट्रांसफॉर्म प्रॉपर्टी का इस्तेमाल वेब पेज पर तत्वों को स्थानांतरित करने, घुमाने, तिरछा करने और स्केल करने के लिए किया जाता है। यह आपको उपयोगकर्ता के लिए एक वेब पेज को अधिक इंटरैक्टिव बनाने की अनुमति देता है।

यह ट्यूटोरियल उदाहरणों के साथ चर्चा करेगा कि कैसे ट्रांसफॉर्म प्रॉपर्टी का उपयोग करके सीएसएस में 2डी ट्रांसफॉर्म के साथ काम करना है। इस ट्यूटोरियल को पढ़ने के अंत में, आप CSS 2D ट्रांसफ़ॉर्म का उपयोग करने के विशेषज्ञ होंगे।

CSS 2D ट्रांसफ़ॉर्म

CSS ट्रांस्फ़ॉर्म फ़ंक्शन आपको वेब पेज पर मूल ट्रांसफ़ॉर्म एनिमेशन जैसे रोटेशन, मूवमेंट, स्केल और स्क्यूज़ बनाने की अनुमति देता है।

जब कोई तत्व रूपांतरित होता है, तो वह आस-पास के किसी भी तत्व को प्रभावित नहीं करता है। हालांकि, एक रूपांतरित तत्व उन्हें ओवरलैप कर सकता है, हालांकि यह अभी भी वेब पेज पर अपने डिफ़ॉल्ट स्थान में स्थान लेगा।

CSS में दो प्रकार के परिवर्तन होते हैं:2D और 3D। ट्रांसफॉर्म प्रॉपर्टी का उपयोग दोनों प्रकार के ट्रांसफॉर्मेशन बनाने के लिए किया जाता है, लेकिन इस लेख के लिए हम 2डी ट्रांसफॉर्म पर ध्यान केंद्रित करने जा रहे हैं।

CSS में वेब तत्वों पर कई 2D रूपांतरण लागू किए जा सकते हैं। य़े हैं:

अनुवाद ()
स्केल()
स्केलएक्स ()
स्केलवाई()
तिरछा ()
स्क्यूएक्स ()
तिरछा ()
मैट्रिक्स ()
घुमाएं ()

आइए इन परिवर्तनों में से प्रत्येक को एक उदाहरण के संदर्भ में अलग-अलग तोड़ दें।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

अनुवाद() परिवर्तन

अनुवाद () विधि का उपयोग किसी तत्व को उसकी वर्तमान स्थिति से स्क्रीन पर एक नई स्थिति में ले जाने के लिए किया जाता है।

अनुवाद () फ़ंक्शन दो मापदंडों को स्वीकार करता है:तत्व को दाईं ओर पिक्सेल की संख्या को स्थानांतरित करना चाहिए, और तत्व के नीचे पिक्सेल की संख्या को स्थानांतरित करना चाहिए।

इस विधि के लिए वाक्य रचना है:

translate(xAxis, yAxis);

मान लीजिए हमारे पास एक बॉक्स है जिसे हम 25px को दाईं ओर और 50px को उसकी वर्तमान स्थिति से नीचे ले जाना चाहते हैं। हम निम्नलिखित कोड का उपयोग करके इस कार्य को पूरा कर सकते हैं:

index.html

<body>
	<p>This is a paragraph of text.</p>
<div><p>This is a box that has been moved using the translate() method.</p></div>
</body>

styles.css

div {
	transform: translate(25px, 50px);
	background-color: lightblue;
	border: 3px solid black;
}

हमारा कोड लौटाता है:

[Result of code here]

आइए हमारे कोड को तोड़ दें। हमारे एचटीएमएल कोड में, हमने टेक्स्ट के दो पैराग्राफ बनाए हैं। पहला पैराग्राफ पृष्ठ के शीर्ष पर दिखाई देता है। दूसरा पैराग्राफ पहले पैराग्राफ के नीचे दिखाई देता है और एक

टैग के भीतर संलग्न है।

हमारे सीएसएस कोड में, हमने एक शैली परिभाषित की है जो हमारे

टैग पर लागू होती है। यह शैली हमारे

के रंग को हल्के नीले रंग में सेट करती है, और हमारे

बॉक्स को 3px-चौड़ा ठोस काला बॉर्डर देती है। इसके अलावा, हमने अपने बॉक्स को 25px बाईं ओर और 50px नीचे ले जाने के लिए अनुवाद () परिवर्तन का भी उपयोग किया है।

यहाँ हमारा कोड बिना किसी अनुवाद () परिवर्तन के निर्दिष्ट है:

index.html

<body>
	<p>This is a paragraph of text.</p>
<div><p>This is a box that has been moved using the translate() method.</p></div>
</body>

styles.css

div {
	background-color: lightblue;
	border: 3px solid black;
}

हमारा कोड लौटाता है:

[Code result here]

जैसा कि आप देख सकते हैं, translate() . निर्दिष्ट किए बिना विधि, हमारा बॉक्स वेब पेज पर अपनी नियमित स्थिति बनाए रखता है।

घुमाएं() परिवर्तन

rotate() परिवर्तन आपको तत्व को दक्षिणावर्त या वामावर्त घुमाने की अनुमति देता है। किसी आइटम को किस हद तक घुमाया जाता है, यह दिए गए डिग्री मान पर आधारित होता है।

rotate() . के लिए वाक्य रचना परिवर्तन इस प्रकार है:

transform: rotate(Xdeg);

उपरोक्त सिंटैक्स में, X उस डिग्री की संख्या को संदर्भित करता है जिसके द्वारा आप किसी तत्व को घुमाना चाहते हैं। यदि आप किसी तत्व को दक्षिणावर्त दिशा में घुमाना चाहते हैं, तो आपको X के लिए एक धनात्मक मान निर्दिष्ट करना चाहिए; अन्यथा, यदि आप किसी तत्व को वामावर्त घुमाना चाहते हैं, तो आपको X के लिए ऋणात्मक मान निर्दिष्ट करना चाहिए।

मान लीजिए हमारे पास एक बॉक्स है जिसे हम 45 डिग्री घुमाना चाहते हैं। हम निम्नलिखित कोड का उपयोग करके अपने बॉक्स को घुमा सकते हैं:

index.html

<div><p>This is a box that has been rotated.</p></div>

styles.css

div {
	transform: rotate(45deg);
	background-color: lightblue;
	border: 3px solid black;
}

हमारा कोड लौटाता है:

[Code result here]

आइए हमारे कोड को तोड़ दें। हमारे एचटीएमएल कोड में, हमने एक

बॉक्स बनाया है जिसमें टेक्स्ट का एक पैराग्राफ है। हमारे सीएसएस कोड में, हमने अपने बॉक्स में एक हल्के नीले रंग की पृष्ठभूमि और एक 3px-चौड़ा ठोस काला बॉर्डर लगाया है। हम अपने

बॉक्स को भी दक्षिणावर्त दिशा में 45 डिग्री घुमाते हैं।

जैसा कि आप हमारे कोड के परिणाम में देख सकते हैं, हमारे द्वारा बनाए गए बॉक्स को घुमाया गया है। यहां हमारे प्री-रोटेट और पोस्ट-रोटेट बॉक्स की तुलना है:

स्केल() परिवर्तन

scale() विधि आपको किसी तत्व के आकार को बढ़ाने या घटाने की अनुमति देती है।

स्केल () विधि का सिंटैक्स इस प्रकार है:

transform: scale(x, y);

स्केल फ़ंक्शन आपके द्वारा निर्दिष्ट मानों के आधार पर छवि की चौड़ाई (x) और ऊंचाई (y) को आनुपातिक रूप से मापेगा। यदि आप ऊंचाई पैमाने के लिए कोई मान निर्दिष्ट नहीं करते हैं, तो स्केल () फ़ंक्शन मान लेगा कि ऊंचाई का पैमाना चौड़ाई के पैमाने के बराबर होना चाहिए।

मान लीजिए कि हमारे पास एक बॉक्स है जिसे हम उसके मूल आकार से 1.5x तक बढ़ाना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scale(1.5, 1.5);
	background-color: lightblue;
	border: 3px solid black;
}

हमारा कोड लौटाता है:

[Code result here]

हमारे एचटीएमएल कोड में, हमने एक बॉक्स बनाया है जिसमें टेक्स्ट का वाक्य होता है। हमारे CSS कोड में, हमने निर्दिष्ट किया है कि सभी

टैग्स में एक हल्का नीला बैकग्राउंड और एक 3px चौड़ा सॉलिड ब्लैक बॉर्डर होना चाहिए। हमने अपने बॉक्स को उसके मूल आकार से 1.5 गुना बड़ा करने के लिए स्केल () पद्धति का भी उपयोग किया है।

यहाँ दो बक्सों के आकार की तुलना करने वाली एक छवि है। सबसे छोटे बॉक्स का कोई पैमाना () मान नहीं है, और सबसे बड़े बॉक्स का पैमाना () 1.5 है:

सबसे बड़ा बॉक्स, जिसमें टेक्स्ट शामिल है This is a box that has been scaled. हमारे मूल बॉक्स से 1.5x बड़ा है।

scaleX() परिवर्तन

scaleX() परिवर्तन आपको किसी तत्व की चौड़ाई बढ़ाने या घटाने की अनुमति देता है। स्केलएक्स () परिवर्तन के लिए सिंटैक्स है:

transform: scaleX(xValue);

xValue पैरामीटर वह राशि है जिसके द्वारा आप किसी तत्व की चौड़ाई को मापना चाहते हैं। मान लीजिए आपके पास एक बॉक्स है जिसकी चौड़ाई आप 1.6 के कारक से बढ़ाना चाहते हैं। आप निम्न कोड का उपयोग करके इस बॉक्स का आकार बढ़ा सकते हैं:

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scaleX(1.5);
	background-color: lightblue;
	border: 3px solid black;
}

हमारा कोड लौटाता है:

[Code result here]

इस उदाहरण में, हमारे बॉक्स की चौड़ाई को इसकी मूल चौड़ाई से 1.5 गुना बढ़ा दिया गया है।

scaleY() परिवर्तन

scaleY() परिवर्तन आपको किसी तत्व की ऊंचाई बढ़ाने या घटाने की अनुमति देता है। स्केलवाई () उसी तरह से काम करता है जैसे स्केलएक्स (), लेकिन किसी तत्व की चौड़ाई को प्रभावित करने के बजाय, स्केलवाई () तत्व की ऊंचाई को बदल देता है।

मान लीजिए हम एक बॉक्स की ऊंचाई को उसकी वर्तमान ऊंचाई से आधा करना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scaleY(0.5);
	background-color: lightblue;
	border: 3px solid black;
}

हमारा कोड लौटाता है:

[Code result here]

हमारे कोड में, हमने अपने बॉक्स की ऊंचाई (जिसे y अक्ष द्वारा दर्शाया गया है) को 0.5 के कारक से घटा दिया है। दूसरे शब्दों में, हमारा बॉक्स अपनी मूल ऊंचाई का आधा है।

तिरछा () परिवर्तन

skew() रूपांतरण किसी तत्व को उसके x और y अक्ष के अनुदिश निर्दिष्ट कोणों द्वारा तिरछा करता है।

तिरछा () विधि का सिंटैक्स इस प्रकार है:

transform: skew(xValue, yValue);

xValue से तात्पर्य है कि किसी तत्व को उसके x अक्ष पर कितना तिरछा किया जाना चाहिए, और yValue का अर्थ है कि किसी तत्व को उसके y अक्ष पर कितना तिरछा होना चाहिए। दोनों मूल्यों को डिग्री में दर्शाया जाना चाहिए।

यदि yValue के लिए कोई मान निर्दिष्ट नहीं है, तो y अक्ष पर कोई तिरछा लागू नहीं किया जाएगा।

मान लीजिए कि हम एक बॉक्स को उसके x अक्ष पर 10 डिग्री और उसके y अक्ष पर 15 डिग्री तिरछा करना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

index.html

<div><p>This is a box that has been skewed.</p></div>

styles.css

div {
	transform: skew(10deg, 15deg);
	background-color: lightblue;
	border: 3px solid black;
}

हमारा कोड लौटाता है:

इस उदाहरण में, हमने अपने बॉक्स को x अक्ष पर 10 डिग्री और y अक्ष पर 15 डिग्री तक तिरछा किया है।

skewX() और skewY() ट्रांसफॉर्मेशन

जैसे scale() विधि, skew() दो उप विधियों के साथ आता है जिनका उपयोग किसी तत्व के x या y अक्ष पर किसी तत्व को तिरछा करने के लिए किया जाता है।

किसी तत्व को केवल उसके X अक्ष पर तिरछा करने के लिए, आप तिरछा () विधि का उपयोग कर सकते हैं। इस विधि का सिंटैक्स इस प्रकार है:

transform: skewX(xValue);

xValue x अक्ष पर डिग्री की संख्या है जिसके द्वारा एक तत्व को तिरछा किया जाना चाहिए।

किसी तत्व को उसके Y अक्ष पर तिरछा करने के लिए, आप तिरछा () विधि का उपयोग कर सकते हैं। SkewY () विधि का सिंटैक्स है:

transform: skewY(yValue);

इसलिए, यदि आप किसी तत्व को उसके Y अक्ष पर 10 डिग्री तक तिरछा करना चाहते हैं, तो आप इस कोड का उपयोग कर सकते हैं:

div {
	transform: skewY(10deg);
}

मैट्रिक्स() परिवर्तन

matrix() परिवर्तन एक तत्व पर सभी 2D CSS परिवर्तन करता है। तो, मैट्रिक्स () का उपयोग अनुवाद, घुमाने, स्केल और तिरछा परिवर्तनों को लागू करने के लिए किया जा सकता है।

मैट्रिक्स () फ़ंक्शन छह मापदंडों को स्वीकार करता है जो आपको किसी तत्व में परिवर्तन लागू करने की अनुमति देता है। इस विधि का सिंटैक्स इस प्रकार है:

ट्रांसफॉर्म:मैट्रिक्स (स्केलएक्स (), स्क्यूवाई (), स्केवएक्स (), स्केलवाई (), ट्रांसलएक्स (), ट्रांसलवाई ());

मान लीजिए कि हम एक बॉक्स बनाना चाहते हैं जो निम्नलिखित परिवर्तनों का उपयोग करता है:

1 के X अक्ष पर एक पैमाना
Y अक्ष पर 10 डिग्री पर एक तिरछा।
एक्स अक्ष पर 10 डिग्री पर एक तिरछा।
Y अक्ष पर 1.25 का एक पैमाना।
एक्स अक्ष पर 25px तक एक आंदोलन ("अनुवाद")।
Y अक्ष पर 25px की गति।

हम इनमें से प्रत्येक परिवर्तन को व्यक्तिगत रूप से निर्दिष्ट कर सकते हैं। हालाँकि, ऐसा करने से हमें कई अलग-अलग परिवर्तन लिखने होंगे। इसके बजाय, हम कोड की एक पंक्ति का उपयोग करके इन परिवर्तनों को लिखने के लिए मैट्रिक्स () विधि का उपयोग कर सकते हैं।

यहां वह कोड है जिसका उपयोग हम उपरोक्त परिवर्तनों के साथ अपना बॉक्स बनाने के लिए कर सकते हैं:

index.html

<div><p>This is a box that has been skewed.</p></div>

styles.css

div {
	transform: matrix(1, 10, 10, 1.25, 25, 25);
	background-color: lightblue;
	border: 3px solid black;
}

हमारा कोड लौटाता है:

[Code result here]

हमारे कोड में, हमने अपने बॉक्स में एक तिरछा, पैमाना और अनुवाद परिवर्तन लागू किया। हमने इसे मैट्रिक्स () विधि का उपयोग करके और पहले निर्दिष्ट मूल्यों को पारित करके पूरा किया।

निष्कर्ष

ट्रांसफॉर्म प्रॉपर्टी का इस्तेमाल सीएसएस में किसी एलिमेंट में ट्रांसफॉर्मेशन लागू करने के लिए किया जाता है। CSS कई 2D रूपांतरण प्रदान करता है, जिसमें तिरछा, स्केल, रोटेट और अनुवाद शामिल हैं, जिनका उपयोग वेब तत्वों को बदलने के लिए किया जाता है।

इस ट्यूटोरियल ने उदाहरणों के संदर्भ में, 2D CSS रूपांतरणों की मूल बातों की खोज की। अब आप एक पेशेवर वेब डेवलपर की तरह अपने स्वयं के 2D रूपांतरण बनाना शुरू करने के लिए तैयार हैं।