वेब पर CSS टूल का उपयोग करके 3D परिवर्तनों के प्रभावशाली उदाहरणों के एक जोड़े को देखने के बाद, मुझे दिलचस्पी हो गई, इस विषय को समझने, कई लेख पढ़ने और कुछ समझने के बारे में निर्णय लिया। लेकिन, जैसा कि आप जानते हैं, अभ्यास के बिना एक सिद्धांत - जैसे एक ज़ोंबी - मर चुका है, हालांकि यह मस्तिष्क खा सकता है।
सामग्री को मास्टर करने के लिए आपको रीड का उपयोग करके खुद को कुछ दिलचस्प करने की आवश्यकता है। किस त्रि-आयामी वस्तु को बनाना सबसे आसान है? शायद एक घन। और परिणाम को अधिक रोचक और अधिक सुंदर बनाने के लिए, इसे किनारों पर डॉट्स के साथ एक पासा होने दें। चलो चलते हैं।
अधीर और उन लोगों के लिए जो मज़ेदार तस्वीरों की खातिर हबर को देखते हैं -
अंतिम परिणाम । क्रोम में काम करता है, फ़ायरफ़ॉक्स, सफारी के नवीनतम संस्करण। ओपेरा 12.01 - अब तक, लेकिन आप खुद IE के बारे में सब कुछ जानते हैं।
निर्माण सामग्री
शुरू करने के लिए, हम एक रिक्त करेंगे। पृष्ठ पर सब कुछ केंद्र में रखने के लिए एक ब्लॉक कंटेनर, एक ब्लॉक क्यूब जिसमें हम अपनी मूर्तिकला के सभी घटकों को डालेंगे, और पांच का एक "स्वीप" (छठा बाद में जोड़ा जाएगा) क्यूब के भविष्य के चेहरे।
"चेहरे" पूरी तरह से एक ब्लॉक-क्यूब में तैनात किए गए तुच्छ वर्ग विभाजन हैं: हम केंद्र में "यूनिट" छोड़ देंगे, यह सामने की तरफ के रूप में काम करेगा, और हम इसके साथ अन्य सभी को डॉक
1 के रूप में डॉक करेंगे। उन्हें अलग-अलग रंगों में मज़ेदार और दृश्य के लिए रंग दें, एक आंतरिक छाया जोड़ें - और यह पर्याप्त है।
चेहरों पर बिंदु भी
स्थिति के साथ ब्लॉक हैं
: वॉल्यूम का भ्रम देने के लिए
पूर्ण, सीमा-त्रिज्या: 50% और एक आंतरिक छाया (
बॉक्स-छाया: इनसेट ...)।
अंत में - दो नहीं तो तुच्छ क्षण।
क्यूब के लिए, आपको निर्दिष्ट करने की आवश्यकता है
transform-style: preserve-3d;
अन्यथा, डिफ़ॉल्ट मान का उपयोग किया जाएगा -
फ्लैट , तीन आयामी दुनिया फिर से सपाट हो जाएगी और केवल एक चेहरा हमारे क्यूब से रहेगा, जो उपयोगकर्ता का सामना करना पड़ रहा है।
थोड़ी टिप्पणी: इसके बाद, परिवर्तनों के लिए सीएसएस गुण उपसर्गों के बिना इंगित किए जाते हैं, लेकिन वास्तविक कोड में, अब के लिए, आपको उनका उपयोग करने की आवश्यकता है।क्यूब में एक संपत्ति भी जोड़ें।
transform: perspective(900px);
जो यह निर्धारित करेगा कि परिप्रेक्ष्य के कारण यह कितना विकृत हो जाएगा। मूल्य जितना बड़ा होगा, "लाइनों के अभिसरण" का बिंदु उतना ही अधिक होगा, विरूपण प्रभाव कम होता है। 200 से नीचे के परिणाम जंगली परिणाम (उदाहरण के लिए,
चित्र 2 ), लगभग 300 - एक ध्यान देने योग्य विकृति (
चित्र 3 ) के लिए नेतृत्व करते हैं, लेकिन हम खुद को मामूली 900 तक सीमित करते हैं, जिससे एक बहुत ही मध्यम प्रभाव होता है।
दिनचर्या खत्म होने के साथ ही मस्ती शुरू हो जाती है।
बेंड और गोंद
हमारे स्कैन को एक तरह के क्यूब में बदलने के लिए, आपको फेस -1 पर चरम चेहरों की समाप्ति की रेखा के साथ "झुकना" चाहिए। ऐसा करने के लिए, हमें दो काम करने की जरूरत है।
सबसे पहले, प्रत्येक चेहरे के लिए अक्ष सेट करें जिसके चारों ओर यह घूमेगा। तथ्य यह है कि, डिफ़ॉल्ट रूप से, ब्लॉक उनके केंद्र के चारों ओर घूमते हैं, और हमें थोड़ा अलग व्यवहार की आवश्यकता होती है - चित्रा 4 में यह स्पष्ट है कि फेस -5 बीसी के चारों ओर सेगमेंट एबी, फेस -2 के आसपास और इसी तरह घूमना चाहिए।
हम संपत्ति का उपयोग करते हैं
transform-origin: yx;
जो वस्तु के लिए रोटेशन के अक्ष को बदलता है। उदाहरण के लिए, फेस -5 के लिए आपको क्रमशः एक्स अक्ष (क्षैतिज) को निचले किनारे पर ले जाने की आवश्यकता है, क्रमशः ट्रांसफॉर्म-उत्पत्ति का दूसरा मूल्य 100% होना चाहिए (
ट्रांसफॉर्मेशन-उत्पत्ति: 0 100%; )। इस मामले में वाई का मूल्य महत्वहीन है, क्योंकि हम इस चेहरे को विशेष रूप से क्षैतिज अक्ष के चारों ओर घुमाएंगे। फेस -2 के लिए, इसका विपरीत सत्य है - X का मान महत्वहीन है, और Y को 0 पर सेट किया जाना चाहिए, अर्थात फिट
ट्रांसफॉर्म-मूल: 0 0 ।
दूसरे, और, इस लेख के लिए, "मुख्य रूप से", हमारे द्वारा उपयोग किए जाने वाले तत्वों के प्रत्यक्ष रोटेशन के लिए
transform: rotate3d(x, y, z, deg);
पहले तीन पैरामीटर निर्धारित करते हैं कि ऑब्जेक्ट की धुरी चारों ओर घूमती है, और आखिरी कितने डिग्री से। एक्स, वाई और जेड को पूर्ण मूल्यों के रूप में परिभाषित नहीं किया गया है, लेकिन कोणों के अनुपात के रूप में। उदाहरण के लिए, कोड
बदलना: रोटेट 3 डी (2, 1, 0, 90 डीजी); X अक्ष के चारों ओर 90 डिग्री और Y के चारों ओर 45 (90 * 1/2) डिग्री पर वस्तु घूमने का कारण बनता है। लाइन
रूपांतरण: रोटा 3 डी (90, 45, 0, 90 डीजी) समान करेगा।
चित्रा 5 में, मैंने कुल्हाड़ियों के चारों ओर ब्लॉकों के रोटेशन को चित्रित करने की कोशिश की: ग्रे आयत ब्लॉक की प्रारंभिक स्थिति है, धुरी जिसके चारों ओर रोटेशन को लाल रंग में हाइलाइट किया गया है, लाल और हरे रंग के आयताकार क्रमशः -60 और 60 डिग्री तक घुमाए गए ब्लॉक की स्थिति है।
हम संबंधित अक्षों के चारों ओर दूसरे से पांचवें चेहरे को 90 डिग्री तक घुमाते हैं, जिसके बाद, स्पष्टता के लिए, हम क्यूब को स्वयं घुमाते हैं,
ट्रांसफॉर्म को जोड़ते हुए
:। आंकड़ा 6 में ।
क्यूब लगभग तैयार है, यह केवल इसे "बंद" करने के लिए रहता है।
ढक्कन बंद करें और परोसें।
अंतिम चेहरे को "एकता" के रूप में एक ही स्थान पर रखा जाना चाहिए, लेकिन 200px (घन के चेहरे के आकार) द्वारा स्क्रीन में "गहरा"। हम संपत्ति का उपयोग करके ऐसा करते हैं
transform: translate3d(x, y, z);
जो आपको किसी भी तीन अक्षों के साथ ब्लॉक को स्थानांतरित करने की अनुमति देता है। हमारे मामले में, Z अक्ष के साथ गति माइनस 200 पिक्सेल (नकारात्मक मान "ब्लॉक" हटाएं, सकारात्मक मान "ज़ूम इन") है। उसी समय, हम एक्स अक्ष के साथ चेहरे को 180 डिग्री पर घुमाते हैं - हालांकि, डिफ़ॉल्ट मानों पर, "डॉट्स" को इसके दोनों किनारों पर प्रदर्शित किया जाएगा, यह चेहरे को दर्शक की ओर चेहरे पर रखने के लिए अधिक सही होगा, और क्यूब के अंदर नहीं। नतीजतन, हमारे "कवर" के लिए ट्रांसफ़ॉर्म प्रॉपर्टी कुछ इस तरह दिखाई देगी:
ट्रांसफ़ॉर्म: ट्रांसलेशन 3 डी (0,0, -200 पीएक्स) रोटा 3 डी (1,0,0,180deg) ।
अंत में, नोटरी
अपारदर्शिता के साथ: 0.9 , हम थोड़ा पारदर्शिता जोड़ेंगे (फ़ायरफ़ॉक्स के लिए, किसी कारण से मुझे समझ में नहीं आता है, केवल इस संपत्ति को अलग-अलग चेहरों के काम में जोड़ता है, लेकिन अभी पूरे ब्लॉक क्यूब में नहीं) - यह है कि हमारा क्यूब ग्लास जैसा दिखता है, कैसा दिखता है यह अधिक प्रस्तुत करने योग्य है और, ईमानदार होने के लिए, यह उस समय के लिए गर्म उदासीनता का हमला करता है जब "कंप्यूटर" काम में पिताजी के लिए एक अतुलनीय मशीन थी, और इसी तरह के एक पासा ने कई खेलों में छद्म संख्या के जनरेटर के रूप में काम किया।
चलो रॉक करते हैं, रोल करते हैं
क्यूब तैयार है, लेकिन इसे दूसरी तरफ से देखने के लिए, आपको सीएसएस पर चढ़ने और संपादित करने की आवश्यकता है - न कि सबसे उपयोगकर्ता के अनुकूल विकल्प, खुलकर। हम अलग तरह से काम करेंगे।
कंटेनर ब्लॉक की शुरुआत में (घन से पहले), चार बटन जोड़ें:
<button class="arrow a-top"></button> <button class="arrow a-bottom"></button> <button class="arrow a-left"></button> <button class="arrow a-right"></button>
फिर से, पूर्ण स्थिति का उपयोग करते हुए, हम उन्हें कंटेनर के सभी चारों तरफ व्यवस्थित करेंगे, जिसके बाद हम निम्नलिखित कार्यों का उपयोग करके क्यूब को घुमाएंगे:
.a-top:hover ~ .cube { transform: perspective(900px) rotate3d(180,-45,0,-135deg); }
"~" चयनकर्ता, "+" के विपरीत, न केवल तत्काल पड़ोसी तक फैले हुए हैं, बल्कि "दूर" वाले भी हैं, जब तक कि वे DOM ट्री में समान स्तर पर हैं, जिनका हम उपयोग करते हैं। जब आप
.a-top बटन पर होवर करते हैं,
तो हम उसके बगल में
.cube ब्लॉक
को घुमाएंगे जैसा हम चाहते हैं।
उसी समय, हम
परिप्रेक्ष्य (900px) का उपयोग करके
परिप्रेक्ष्य विकृति को बदल देंगे। जैसा कि आप याद करते हैं (याद रखें, ठीक है?), हमने काम की शुरुआत में क्यूब के लिए समान मूल्य निर्धारित किया है, लेकिन अगर आप घन के बाद वापस हमारे पास, और जंगल (डेस्कटॉप वॉलपेपर पर) से पहले इस संपत्ति को फिर से घोषित नहीं करते हैं, तो और यह विकृति घन के साथ एक साथ निकलेगी - दर्शक के सबसे करीब का हिस्सा कम हो जाएगा, और दूर के हिस्से का विस्तार होगा। यह देखने में आसान लगता है, इसलिए हम प्रत्येक मोड़ पर फिर से परिप्रेक्ष्य प्रदान करेंगे।
ठीक है, ताकि हमारा क्यूब एक स्थिति से दूसरे स्थान पर न जाए, लेकिन आसानी से घूम जाए - इसमें एक पंक्ति जोड़ें
transition: all 1s ease;
रूसी में अनुवादित - मान लीजिए कि एक क्यूब आसानी से सभी गुणों (
सभी ) को बदलने के लिए है जो एक सेकंड (
1 एस ) के भीतर बदल जाएगा और यह
आसानी फ़ंक्शन का उपयोग करते हुए, अर्थात्। एनीमेशन की शुरुआत में, आसानी से इसे तेज करें, और अंत में - इसे आसानी से रोक दें।
आसानी के बजाय एकरूपता के प्रशंसक
रैखिक को निर्दिष्ट कर सकते हैं - इस मामले में, क्यूब थकाऊ और सौहार्दपूर्ण रूप से आगे बढ़ेगा।
हालांकि, ह्यूस्टन, हमारे पास एक और समस्या है। रोटेशन फेस -1 के केंद्र के चारों ओर जाता है, न कि क्यूब का केंद्र ही - जो सामान्य रूप से तार्किक है, क्योंकि हमने इसे ब्लॉक क्यूब में अंकित किया है, और बाकी सभी "मुड़े हुए" हैं या "गहरे" हैं। हालांकि, यह काफी सरल रूप से हल किया गया है: आपको बस एक ही
Translate3d (0,0,100px) का उपयोग करके पर्यवेक्षक के करीब सभी चेहरों को "स्थानांतरित" करने की आवश्यकता है ताकि रोटेशन का केंद्र घन के केंद्र के साथ मेल खाता हो।
अब यह बहुत अच्छी तरह से निकला। आप सामग्री को समेकित करने के लिए हैबर पर एक लेख लिख सकते हैं, जो आपने सहकर्मियों के साथ सीखा है उसे साझा करें और बस दिखावा करें।
डेमो लिंकसबसे उत्सुक के लिए पुरालेखPS एक लेख लिखते समय और सैंडबॉक्स में अपना रास्ता बनाते हुए,
इसी तरह का एक
लेख पहले ही हब पर दिखाई दे चुका है, लेकिन मुझे लगता है कि वे एक दूसरे के पूरक होंगे।
अद्यतन:ज़ापिमिर से महत्वपूर्ण जोड़
- 3DTransform अभी भी केवल एक मसौदा है, एक मानक नहीं, परिवर्तन के अधीन है
- IE10 इस तकनीक का समर्थन करता है (
डेमो को जोड़ा गया, जोड़ा -ms- उपसर्ग )
- caniuse.com पर ग्रह की प्रगति का पालन करना सुविधाजनक है - विशेष रूप से,
यहां