CSS3 2D रूपांतरण में एक नज़र
परिवर्तन मॉड्यूल CSS3 में एक जबरदस्त जोड़ है, यह उस तरह से लेता है जैसे हम किसी वेबसाइट पर तत्वों को अगले स्तर तक जोड़ते हैं.
कुछ प्रयोग हैं जो वास्तव में मुझे विस्मित करते हैं, उदाहरण जैसे कि यह। हालाँकि, हम सीएसएस-ओनली आइकन की तरह कुछ नहीं बनाने जा रहे हैं, जो किसी भी तरह से ऑटोबोट में बदल सकता है, क्योंकि यह वास्तविक रूप में भी भारी हो सकता है और वास्तविक रूप में भी उपयोग करने योग्य नहीं है।.
इसके बजाय, इस बार, हम पीछे हटेंगे और CSS3 2D ट्रांसफ़ॉर्मेशन की मूल बातों की समीक्षा करेंगे कि यह कैसे एक मौलिक स्तर पर काम करता है.
सिंटेक्स
CSS3 ट्रांसफ़ॉर्मेशन मॉड्यूल मूल रूप से हमें एक निश्चित सीमा तक एक तत्व को बदलने की अनुमति देता है जैसे अनुवाद करना, स्केल करना, घुमाना और तिरछा करना.
आधिकारिक सिंटैक्स है परिणत: विधि (मान). हालांकि, किसी भी अन्य CSS3 के महान परिवर्धन की तरह, जो अभी भी प्रारंभिक अवस्था में है, वर्तमान ब्राउज़रों को अभी भी रूपांतरणों को चलाने के लिए सिंटैक्स संस्करण की आवश्यकता है। तो, पूरा सिंटैक्स इस तरह निकलेगा:
परिवर्तन: विधि (मूल्य); / * W3C आधिकारिक सिंटैक्स * / -o-transform: मेथड (मान); / * ओपेरा 10.5+ * / -ms-बदलना: विधि (मूल्य); / * इंटरनेट एक्सप्लोरर 9.0+ * / -मोज़-परिवर्तन: विधि (मूल्य); / * फ़ायरफ़ॉक्स 3.6+ * / -webkit- परिवर्तन: विधि (मूल्य); / * क्रोम / सफारी 3.2+ * /
इसके अलावा, जिस विधि का हम ऊपर उल्लेख कर रहे हैं वह है परिणत-कार्यों, जिसे निम्नलिखित में से किसी एक के साथ बदला जा सकता है: अनुवाद करना(), पैमाने (), बारी बारी से () या तिरछा ().
महत्व
अधिकांश विधि का मान इसके अनुरूप होगा X- अक्ष तथा शाफ़्ट. यदि आपको याद है कि हाई स्कूल में आपके गणित वर्ग से कार्टेशियन निर्देशांक प्रणाली है, तो मूल सिद्धांत काफी समान है, एक्स-एक्सिस प्रतिनिधित्व करता है। क्षैतिज लाइन और Y- अक्ष का प्रतिनिधित्व करता है खड़ा लाइन.
सिवाय रोटेशन के। रोटेशन का उपयोग करेगा धुवीय निर्देशांक जो 0 से 360 तक की डिग्री में व्यक्त किया जाता है.
सभी विधियों के लिए मान नकारात्मक या सकारात्मक दोनों हो सकते हैं। बस एक नोट लें, क्योंकि वेब पेज को क्रमिक रूप से ऊपर से नीचे तक पढ़ा जाता है जो वेब में वाई-अक्ष को कार्टेशियन निर्देशांक के मूल सिद्धांत से विपरीत काम करता है। इसका मतलब यह है कि जब आप एक नकारात्मक मूल्य जोड़ते हैं शाफ़्ट, यह इसके बजाय शीर्ष पर जाएगा.
ट्रांसफॉर्मेशन का उपयोग करना
अब, कार्रवाई में परिवर्तन देखने के लिए निम्नलिखित मूल प्रदर्शन देखें.
मैं अनुवाद करता हूं
शब्द के साथ बादल न हों अनुवाद करना, यह विदेशी भाषा का अनुवाद नहीं करेगा। अनुवाद करना यहाँ वास्तव में तत्वों को किसी दिशा में ले जाने की एक विधि है.
विधि में दो मान शामिल हैं; एक्स तथा Y. X मान जैसा कि हमने ऊपर बताया कि तत्व क्षैतिज रूप से ले जाएगा; बाईं ओर या दाईं ओर, जबकि Y मान इसे लंबवत रूप से लेता है नीचे या ऊपर.
अब, नीचे कुछ सरल प्रदर्शन देखें:
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; रूपांतर: अनुवाद (100px, 250px);
ऊपर का स्निपेट 100px के लिए तत्व को दाईं ओर और 250px को नीचे की ओर ले जाएगा.
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; परिवर्तन: अनुवाद (100 पीएक्स, 0);
ऊपर का स्निपेट तत्व को केवल 100px के लिए दाईं ओर ले जाएगा, क्योंकि हम Y- अक्ष को शून्य कर रहे हैं। फिर, यदि हम तत्व को बाईं ओर ले जाना चाहते हैं, तो हमें केवल एक्स-अक्ष को नकारात्मक में सेट करना होगा, निम्नानुसार है:
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; रूपांतर: अनुवाद (-100px, 0);
- "अनुवाद" डेमो
वैकल्पिक रूप से, हम इन व्यक्तिगत विधियों के साथ तत्व को एक दिशा में स्थानांतरित करने में सक्षम हैं; translateX () तथा translateY (), अंतर उन तरीकों में से प्रत्येक केवल एक मूल्य को स्वीकार करते हैं.
तो, व्यावहारिक रूप से बोल, रूपांतर: अनुवाद (-100px, 0) के बराबर भी है रूपांतर: TranslX (-100px).
II - स्केल
स्केल विधि हमें अनुमति देता है बड़ा करना या कम करना तत्वों को उसके वास्तविक आकार से। स्केल का मान समान है अनुवाद करना ऊपर विधि, इसमें एक्स और वाई भी शामिल हैं। केवल अंतर यह है कि हम इकाई को निर्दिष्ट नहीं करते हैं। यहाँ एक उदाहरण है:
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; रूपांतर: स्केल (1.5);
उपरोक्त उदाहरण में विस्तार होगा div 1.5 या है 150% इसके वास्तविक आकार के, और चूंकि हम इसे एक्स और वाई दोनों दिशाओं के लिए समान रूप से मापते हैं, इसलिए हमें केवल एक मूल्य में इसे घोषित करने की आवश्यकता है। आप इसे इस तरह से भी घोषित कर सकते हैं रूपांतर: स्केल (1.5,1.5); यदि आप अधिक विस्तार से जाना चाहते हैं, तो यह सिर्फ वही करेगा.
इसके अलावा, अगर हम उस तत्व को कम करना चाहते हैं जो हम विशेष रूप से 0.999 से पूर्ण 0 तक के मूल्य का उपयोग करेंगे, तो नीचे दिए गए उदाहरण की तरह, जो 50% या आधे के लिए div के आकार को कम करेगा:
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; रूपांतर: स्केल (0.5);
लेकिन, सतर्क रहें, यदि आप निरपेक्ष होने के लिए मूल्य निर्धारित करते हैं “0” div बस गायब हो जाएगा, इसलिए जब तक आपके पास ऐसा करने का एक वैध कारण नहीं है, मैं इसे करने की सिफारिश नहीं करूंगा.
- "स्केल" डेमो
III - घुमाएँ
जैसा कि हमने पहले इस पोस्ट में उल्लेख किया है, घुमाना विधि ध्रुवीय निर्देशांक का उपयोग करती है, इसलिए मान डिग्री में कहा गया है। यहाँ दो उदाहरण हैं
नीचे का स्निपेट घुमाएगा div 30 डिग्री दक्षिणावर्त.
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; परिवर्तन: घुमाएँ (30 डिग्री);
एक नकारात्मक मान, जैसा कि नीचे दिए गए उदाहरण में दर्शाया गया है, घुमाएगी div एक ही डिग्री पर विपरीत दिशा में (काउंटर-क्लॉकवाइज).
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; रूपांतर: घुमाएँ (-30deg);
- "घुमाएँ" डेमो
IV - तिरछा
तिरछा पद्धति हमें एक प्रकार का समांतर चतुर्भुज बनाने में सक्षम बनाती है। इसमें X और Y- अक्ष के दो मूल्य भी शामिल हैं। हालांकि, मूल्य स्वयं डिग्री में कहा गया है, बजाय रैखिक माप के जैसे हम उपयोग करते हैं स्केल या अनुवाद करना तरीका। यहाँ एक उदाहरण है:
div चौड़ाई: 200px; ऊंचाई: 100 पीएक्स; परिवर्तन: तिरछा (30 डिग्री, 10 डिग्री);
- "तिरछा" डेमो
वी - एकाधिक विधि
परिवर्तन संपत्ति केवल एक विधि को संभालने के लिए सीमित नहीं है, वास्तव में हम एकल घोषणाओं में कई तरीकों को शामिल कर सकते हैं, जैसे:
div चौड़ाई: 100px; ऊंचाई: 100 पीएक्स; रूपांतर: ट्रांसप्लक्स (100 पीएक्स) रोटेट (45 डीजी);
उपरोक्त स्निपेट तत्व 100px को दाईं ओर ले जाएगा और साथ ही यह 45 डिग्री पर भी घूमता है.
"मल्टीपल मेथड" डेमो.
ट्रांसफॉर्म उत्पत्ति
transfrom मूल के - जैसा कि इसके नाम का अर्थ है - परिवर्तन के शुरुआती बिंदु को नियंत्रित करने के लिए उपयोग किया जाता है। अगर हम निम्नलिखित सिंटैक्स के साथ इस संपत्ति को स्पष्ट रूप से घोषित नहीं करते हैं परिवर्तन-उत्पत्ति: एक्स वाई;, फिर ब्राउज़र डिफ़ॉल्ट मान लेगा जो X के लिए 50% और Y के लिए 50% है.
अब, यदि हम निर्दिष्ट करते हैं बदलने मूल के 0 से (X) 0 (Y) परिवर्तन शीर्ष-बाएँ से शुरू होगा.
फिर से, सभी ब्राउज़रों को अभी भी इस संपत्ति को कॉल करने के लिए उपसर्ग संस्करण की आवश्यकता है। इसलिए, यह सुनिश्चित करने के लिए कि वर्तमान ब्राउज़र में यह काम करता है:
-वेबकिट-ट्रांसफॉर्म-उत्पत्ति: एक्स वाई; -मोज़-ट्रांसफॉर्म-मूल: एक्स वाई; -ओ-परिवर्तन-उत्पत्ति: एक्स वाई; -ms-transform-origin: X Y; परिवर्तन-उत्पत्ति: एक्स वाई;
- "ट्रांसफॉर्म-मूल" डेमो
निष्कर्ष
हम सभी चार आवश्यक परिवर्तन विधियों के माध्यम से आए हैं; अनुवाद, पैमाने, घुमाएँ और तिरछा
हालांकि, जैसा कि उल्लेख किया गया है, यह मॉड्यूल अभी भी प्रारंभिक चरण में है, इसलिए यदि आप अपनी अगली वेबसाइट में इन विधियों को लागू करेंगे, तो सुनिश्चित करें कि यह असंगत ब्राउज़रों के लिए कृपापूर्वक अपमानित करता है (मैं यहां IE6 का संदर्भ नहीं दे रहा हूं).
अंत में, आप सभी डेमो देख सकते हैं या निम्न लिंक से स्रोत डाउनलोड कर सकते हैं.
- डेमो
- स्रोत डाउनलोड करें
