🕹️ 🤾 👰 सीएसएस 3 डी प्रभाव 👩🏽‍🏭 👩🏼‍🚀 ☠️

स्टीफन विटेंस ने अपनी Acko.net वेबसाइट को फिर से डिजाइन किया। विटनेस ने तेजस्वी 3 डी पेज शीर्षक बनाने के लिए CSS3 3 डी सुविधाओं और जावास्क्रिप्ट के एक छोटे टुकड़े का उपयोग किया।

3 डी एक्शन देखने के लिए आपको वेबकिट ब्राउज़र (सफारी या क्रोम) का उपयोग करने की आवश्यकता है केवल वे सीएसएस 3 डी प्रभाव का समर्थन करते हैं। अन्य ब्राउज़रों में जो अभी तक 3 डी प्रभावों का समर्थन नहीं करते हैं, साइट अभी भी सामान्य रूप से देखी जाती है। पूर्ण 3 डी प्रभाव को देखने के लिए, पृष्ठ को नीचे स्क्रॉल करना सुनिश्चित करें।

विटेंस ने अपने ब्लॉग पर विस्तार से लिखा कि कैसे उन्होंने 3 डी प्रभाव बनाया और एक 3 डी संपादक भी बनाया जिसके साथ आप खेल सकते हैं ।

ब्राउज़रों में कुछ सीएसएस सीमाओं के आसपास पाने के लिए, विटेंस ने थ्री.जेएस का उपयोग किया, जो रिकार्डो कैबेलो (उनकी प्रसिद्ध परियोजना, हार्मनी ) द्वारा लिखित एक जावास्क्रिप्ट 3 डी लाइब्रेरी है। उन लोगों के लिए जो Acko.net पर कुछ रूपांतरणों के स्रोत कोड में रुचि रखते हैं, विटनेस ने निकट भविष्य में इसे GitHub पर जारी करने का वादा किया।

आप इस कोड के साथ परीक्षण कर सकते हैं:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="author" content="Steven Wittens"> <link rel="stylesheet" href="http://acko.net/cache/combo.css" type="text/css" media="all" charset="utf-8" /> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" charset="utf-8" src="http://acko.net/cache/combo.js"></script> <script type="text/javascript" src="http://use.typekit.com/nde6wmn.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <script type="text/html" id="template-site-name" charset="utf-8"> <h1 class="site-name">Habrahabr</h1> </script> </head> <body> <div class="css3d-support"></div> <div class="voila"></div> <div class="perspective"> <header><div id="hackery"></div></header> <div class="spacer"></div> </div> </body> </html>

~~अपने सामान्य रूप में CSS कोड यहाँ , JS यहाँ लिया जा सकता है ।~~
UPD: CSS - forum.xeksec.com/habr/3d/combo.css के पूर्ण संस्करण को पुनः लोड किया गया
JS - forum.xeksec.com/habr/3d/combo.js

सीएसएस 3 डी प्रभाव

More articles: