3D और सीएसएस

पॉल किनलन

शुरुआती जानकारी

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

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

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

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

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

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

ब्राउज़र सहायता और हार्डवेयर त्वरण

-वेबकिट-परस्पेक्टिव

-webkit-transform-3d

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

सुविधा की पहचान करने वाली सुविधा

सुविधा की पहचान करने की सुविधा का क्या होगा? मुझे लगता था कि तुम न पूछेंगी! ब्राउज़र की कुछ खास सुविधाओं और क्षमताओं को पहचानने के लिए, डेवलपर मॉडर्निज़r जैसे टूल का इस्तेमाल कर रहे हैं. हालांकि 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>

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

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

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

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

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

खास जानकारी

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