CSS में Transform का उपयोग कैसे करें?



इस लेख में हम समझेंगे कि ट्रांसफॉर्म इन सीएसएस क्या है विस्तार से और इसका पालन एक विस्तृत व्यावहारिक प्रदर्शन के साथ करें।

इस लेख में हम ट्रांसफॉर्म इन को समझेंगे विस्तार से और एक विस्तृत व्यावहारिक प्रदर्शन के साथ इसका पालन करें। इस लेख में निम्नलिखित बिंदुओं को शामिल किया जाएगा,

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





सीएसएस में ट्रांसफॉर्म पर इस लेख के साथ आगे बढ़ना

क्या है CSS?

CSS तत्व को बदलने का अर्थ है इसे 2D या 3D रूप में बढ़त प्रदान करना। यह नेत्रहीन एक तत्व की स्टाइल को बदलता है।
2 डी परिवर्तन एक्स और वाई कुल्हाड़ियों पर काम करता है। आप परिवर्तन करने के लिए दोनों कुल्हाड़ियों पर कोई धार या संरचना प्रदान कर सकते हैं। 3 डी परिवर्तन के लिए, इसे X, Y और Z कुल्हाड़ियों पर काम करने की आवश्यकता है ताकि आवश्यक गहराई प्रदान की जा सके।



CSS 2D रूपांतरण गुण:

समारोह विवरण

आव्यूह( एन, एन, एन, एन, एन, एन )

छह मूल्यों का मैट्रिक्स



अनुवाद करना( एक्स, वाई )

तत्व को X- और Y- अक्ष के साथ स्थानांतरित करने की अनुमति देता है

TranslX ( एन )

तत्व को एक्स-अक्ष के साथ स्थानांतरित करने की अनुमति देता है

उदाहरण के साथ जावा में mvc वास्तुकला

अनुवाद करें ( एन )

तत्व को Y- अक्ष के साथ स्थानांतरित करने की अनुमति देता है

पैमाना ( एक्स, वाई )

तत्वों की चौड़ाई और ऊंचाई को बदलता है

स्केलएक्स ( एन )

तत्व की चौड़ाई को बदलता है

पैमाना एन )

एक तत्व ऊंचाई को बदलता है

घुमाएँ ( कोण )

पैरामीटर में निर्दिष्ट तत्व को कोण में घुमाने की अनुमति देता है

तिरछा ( x- कोण, y- कोण )

X- और Y- अक्ष के साथ तत्व को छोड़ें

SkewX ( कोण )

एक्स-अक्ष के साथ तत्व को स्क्यू करें

तिरछा ( कोण )

Y- अक्ष के साथ तत्व को छोड़ें

सीएसएस 3 डी परिवर्तन गुण:

संपत्ति

विवरण

बदल रहा है

किसी तत्व में 2D या 3D परिवर्तन लागू करता है

परिवर्तन-उत्पत्ति

आपको परिवर्तित तत्वों पर स्थिति बदलने की अनुमति देता है

परिवर्तन-शैली

निर्दिष्ट करता है कि नेस्टेड तत्वों को 3 डी अंतरिक्ष में कैसे प्रदान किया जाता है

परिप्रेक्ष्य

3D तत्वों को कैसे देखा जाता है, इस परिप्रेक्ष्य को निर्दिष्ट करता है

परिप्रेक्ष्य-उत्पत्ति

3D तत्वों की निचली स्थिति को निर्दिष्ट करता है

बैकफेस-दृश्यता

परिभाषित करता है कि स्क्रीन का सामना न करने पर एक तत्व दिखाई दे या नहीं

उदाहरण के लिए:

css। डाक {चौड़ाई: 20px ऊंचाई: 20px परिवर्तन: स्केल (20)}

अब, जब आप ऐसा करते हैं, तो परिभाषित तत्व 20 गुना बढ़ जाएगा।

उदाहरण- ट्रांसफॉर्म सीएसएस- एडुर्का

यही नहीं, आप क्षैतिज स्केलिंग और वर्टिकल स्केलिंग के लिए एक्सिस वाइज स्केल भी कर सकते हैं।

रूपांतर: पैमाना (2) रूपांतर: पैमाना (.5)

आप कर सकते हैं सभी ब्राउज़रों में एक उचित परिवर्तन प्रदान करने के लिए:

div {-webkit- परिवर्तन: स्केल (1.5) -मोज़-ट्रांसफ़ॉर्म: स्केल (1.5) -o-ट्रांस्फ़ॉर्म: स्केल (1.5) ट्रांसफ़ॉर्म: स्केल (1.5)}

सीएसएस विज़ुअल फॉर्मेटिंग स्तर में ट्रांसफ़ॉर्म सीएसएस प्रॉपर्टी के समन्वय स्थान में सुधार होता है।
दृश्य स्वरूपण स्तर क्या है?
विज़ुअल फ़ॉर्मेटिंग स्तर का अर्थ है किसी दस्तावेज़ को संसाधित करना और उसे मीडिया प्लेटफ़ॉर्म पर दिखाना। दृश्य स्वरूपण के साथ, आप प्रत्येक तत्व को एक मॉडल के रूप में बदल सकते हैं जो CSS बॉक्स मॉडल से सहमत है। CSS बॉक्स मॉडल एक मानक आयताकार बॉक्स प्रारूप में एक तत्व को परिभाषित करता है जो आकार, स्थिति और गुणों को परिभाषित करता है।
ध्यान दें: केवल परिवर्तनशील तत्व ही रूपांतरित हो सकते हैं।

सीएसएस में ट्रांसफॉर्म पर इस लेख के साथ आगे बढ़ना

विभिन्न परिवर्तन गुण क्या हैं?

सभी परिवर्तित गुणों पर एक नजर डालते हैं:

१.काले (): स्केलिंग का अर्थ तत्व के आकार को क्षैतिज या लंबवत रूप से बदलना है।

ऊर्ध्वाधर स्केलिंग के लिए:पैमाना

क्षैतिज स्केलिंग के लिए:पैमाना

एक तत्व के लिए, आप फ़ॉन्ट-आकार, पैडिंग, ऊंचाई, या चौड़ाई भी बदल सकते हैं। डिफ़ॉल्ट मान 1 है जिसका अर्थ है 0.5 प्रदान करना भी है क्योंकि मूल्य इसे बढ़ाता है जबकि 2 स्केलिंग प्रदान करता है।

2. तिरछा (): तिरछी संपत्ति उपयोगकर्ता को एक समन्वय बिंदु से किसी तत्व को दाईं या बाईं ओर झुकाने की अनुमति देती है। यह लगभग एक आयत को समांतर चतुर्भुज में बदलने जैसा है। आप अपने निर्देशांक से किसी तत्व को तिरछा कर सकते हैं।

उदाहरण:

.element {ट्रांसफ़ॉर्म: skewX (25deg)} .element {ट्रांसफ़ॉर्म: skewY (25deg)

जब आप ऐसा करते हैं, तो तत्व skewX या skewY का उपयोग करके क्षैतिज और लंबवत रूप से 25 डिग्री पर स्केज़ करता है।

3. घुमाएँ ( ) : आप इस संपत्ति का उपयोग करके एक तत्व को दक्षिणावर्त घुमा सकते हैं। इसे वापस मूल स्थान पर लाने के लिए आप इसे 180 डिग्री या 360 डिग्री तक घुमा सकते हैं।

.element {रूपांतर: घुमाना (25deg)}

रोटेशन प्रदान करने के लिए, आप तीन आयामों में से किसी का भी उपयोग कर सकते हैं: रोटेक्स, रोटे या रोटज।

4. अनुवाद ( ) : आप किसी तत्व को ठीक से उल्टा या बग़ल में घुमा सकते हैं।

.element {रूपांतर: अनुवाद (20px, 10px)}

अनुवाद किसी वस्तु / तत्व को उल्टा या बग़ल में निर्दिष्ट करेगा। पहला निर्दिष्ट मान ऑब्जेक्ट दाएं वार्ड को स्थानांतरित करता है (नकारात्मक इसे बाईं ओर ले जाएगा) और दूसरा मान इसे नीचे ले जाता है (एक नकारात्मक मान निर्दिष्ट करते हुए इसे ऊपर की ओर ले जाएगा)।

यदि यह आपको भ्रमित कर सकता है, तो क्षैतिज स्थिति को बदलने के लिए क्षैतिज रूप से तत्व की स्थिति और Y अक्ष को बदलने के लिए एक्स अक्ष लागू करें। संपत्ति बदलने के बारे में सबसे आश्चर्यजनक पहलू यह है कि, परिवर्तन लागू करने से तत्व को हर दूसरे तत्व या पाठ को अक्षुण्ण रखने में मदद मिलेगी। दूरी आमतौर पर पिक्सल या प्रतिशत में ली जाती है।

उदाहरण के लिए:

.element {ट्रांस्फ़ॉर्म: ट्रांस्फ़्लेक्स (मान) रूपांतर: ट्रांसफ़ी (मान)}

5. परिप्रेक्ष्य (): आप एक तत्व के परिप्रेक्ष्य में गहराई प्रदान कर सकते हैं। यह एक तत्व में 3 डी परिवर्तन को परिवर्तन में घना बनाने की अनुमति देता है।
Translate3d (x, y, z)
अनुवाद (z)

अनुवाद 3 डी (x, y, z)

Z अक्ष का परिचय तत्व को 3D विज़ुअलाइज़ेशन देता है। ट्रांसजेड () तत्व को दर्शक की ओर ले जाता है जबकि एक नकारात्मक मान इसे दूर ले जाता है।

6. मैट्रिक्स () : सभी परिवर्तनों को एक में मिलाएं।

घुमाएँ (45deg) अनुवाद (जीपीएक्स, 25 पीएक्स)

मैट्रिक्स लागू करना () सभी परिवर्तन गुणों को एक सरणी में जोड़ता है।

रूपांतरित गुण लागू करना आपके तत्व को बढ़ा सकता है और इसलिए आपकी वेबसाइट अपील करती है। उन्हें कोशिश करो!

यह हमें इस लेख के अंत में Transform In CSS पर लाता है।

यदि आप वेब-विकास के बारे में अधिक जानने में रुचि रखते हैं, तो देखें Edureka द्वारा। वेब डेवलपमेंट सर्टिफिकेशन ट्रेनिंग आपको HTML5, CSS3, ट्विटर बूटस्ट्रैप 3, jQuery और Google API का उपयोग करके प्रभावशाली वेबसाइट बनाने और इसे अमेज़ॅन सिंपल स्टोरेज सर्विस (S3) में तैनात करने में मदद करेगी।

यदि आप अभी भी रुचि रखते हैं यदि आपके कोई प्रश्न हैं, तो आप इसे 'सीएसएस' ब्लॉग के टिप्पणी अनुभाग में पोस्ट कर सकते हैं, और हम जल्द से जल्द आपके पास वापस आ जाएंगे।