3D और सीएसएस

Paul Kinlan

परिचय

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

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

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

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

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

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

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

-webkit-perspective

-webkit-transform-3d

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

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

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

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

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

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

<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>

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

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

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

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

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

खास जानकारी

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