3D और सीएसएस

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

Paul Kinlan

परिचय

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

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

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

सीएसएस 3D ट्रांसफ़ॉर्मेशन का वर्किंग ड्राफ़्ट, सीएसएस 2D ट्रांसफ़ॉर्मेशन मॉडल का लॉजिकल एक्सटेंशन है. इसमें कुछ अतिरिक्त प्रॉपर्टी शामिल की गई हैं. जैसे: 3D स्पेस में पर्सपेक्टिव, रोटेशन, और ट्रांसफ़ॉर्मेशन.

इससे पहले, हम 3D इंटरफ़ेस को इतनी आसानी से नहीं बना पाते थे. इन टेक्नोलॉजी की मदद से, अब डेटा को इकट्ठा करना आसान हो गया है. अब आपको 3D एलिमेंट बनाने के लिए, गणित के बारे में जानने की ज़रूरत नहीं है.

ध्यान दें कि सीएसएस 3D मॉड्यूल को डेवलपर के लिए डिज़ाइन किया गया है, ताकि वे बेहतर और विज़ुअल तौर पर दिलचस्प ऐप्लिकेशन बना सकें. इसे इमर्सिव 3D वर्ल्ड बनाने के लिए डिज़ाइन नहीं किया गया है.

ब्राउज़र से जुड़ी सहायता और हार्डवेयर से तेज़ी लाने की सुविधा

-webkit-perspective

-webkit-transform-3d

ध्यान रखें कि भले ही कोई ब्राउज़र 3D की "सहायता" करता हो, लेकिन हो सकता है कि वह हार्डवेयर और ड्राइवर की सीमाओं की वजह से 3D रेंडर न कर पाए. डीओएम पर आधारित 3D सीन, कैलकुलेशन के हिसाब से काफ़ी महंगे हो सकते हैं. इसलिए, ब्राउज़र वेंडर ने सॉफ़्टवेयर रेंडरिंग के समाधान से ब्राउज़र को धीमा करने के बजाय, जीपीयू का फ़ायदा लेने का फ़ैसला लिया है. हालांकि, यह सभी प्लैटफ़ॉर्म पर उपलब्ध नहीं हो सकता

फ़ीचर का पता लगाना

सुविधा का पता लगाने की सुविधा के बारे में क्या जानकारी है? मुझे उम्मीद थी कि आप यह नहीं पूछेंगे! डेवलपर, Modernizr जैसे टूल का इस्तेमाल करके यह पता लगाते हैं कि ब्राउज़र में कौनसी सुविधाएं और क्षमताएं काम करती हैं. 3D ट्रांसफ़ॉर्मेशन के लिए, डिवाइस पर इस सुविधा के काम करने की जानकारी का पता लगाया जा सकता है. हालांकि, हार्डवेयर से तेज़ी लाने की सुविधा के काम करने की जानकारी का पता नहीं लगाया जा सकता. यह सुविधा, 3D ट्रांसफ़ॉर्मेशन के लिए सबसे ज़रूरी है.

बुनियादी सैंपल

सीधे तौर पर शुरू करने से बेहतर कुछ नहीं है. इस सैंपल में, हम किसी भी DOM एलिमेंट के रोटेशन का बुनियादी सेट लागू करेंगे.

हम रूट एलिमेंट के लिए एक पर्सपेक्टिव तय करके शुरुआत करते हैं.

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

पर्सपेक्टिव अहम है, क्योंकि इससे यह तय होता है कि 3D सीन की गहराई को कैसे रेंडर किया जाए. 1 से 1,000 के बीच की वैल्यू से बहुत ज़्यादा असर होगा और 1,000 से ज़्यादा की वैल्यू से कम असर होगा. इसके बाद, हम एक iframe जोड़ते हैं और Z और Y ऐक्सिस के आस-पास 30 डिग्री का रोटेशन लागू करते हैं

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

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

ऐनिमेट किया जा रहा है

मुझे CSS3 3D ट्रांसफ़ॉर्मेशन की यह बात पसंद है कि यह CSS ट्रांज़िशन मॉड्यूल के साथ बहुत अच्छी तरह से जुड़ता है. सीएसएस में ऐनिमेशन और ट्रांज़िशन को आसानी से तय किया जा सकता है. इनका इस्तेमाल 3D में भी किया जा सकता है.

जिन एलिमेंट पर 3D पर्सपेक्टिव लागू किया गया है उन्हें ऐनिमेट करना आसान है. इसके लिए, "ट्रांज़िशन" स्टाइल को "ट्रांसफ़ॉर्म" पर सेट करें. साथ ही, इसमें अवधि और ऐनिमेशन फ़ंक्शन जोड़ें. इसके बाद, "ट्रांसफ़ॉर्म" स्टाइल में किया गया कोई भी बदलाव ऐनिमेट किया जाएगा.

हमने इनलाइन स्टाइल के बजाय, दस्तावेज़ स्टाइल का इस्तेमाल करने के लिए, पिछले उदाहरणों को फिर से फ़ैक्टर किया है. इससे न सिर्फ़ उदाहरण साफ़ होता है, बल्कि सैंपल को :hover स्यूडो सिलेक्टर का फ़ायदा भी मिलता है. :hover सिलेक्टर का इस्तेमाल करके, माउस को एलिमेंट पर ले जाकर ट्रांज़िशन शुरू किए जा सकते हैं. बहुत बढ़िया!

खास जानकारी

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