सीएसएस के साथ 3 डी बटन फ्लिप एनिमेशन कैसे बनाएं

एक दूसरे पर, बटन के आगे और पीछे के चेहरे के लिए दो, और बीच में गहराई भरने के लिए तीसरा एक। हम तीन बटन चेहरे में डाल दिया .flipBtn कंटेनर जो 3D बटन के रूप में कार्य करेगा, और हम 3D बटन को इसमें रखते हैं .flipBtnWrapper आवरण.

2. सीएसएस के साथ बुनियादी शैलियों को जोड़ना

हमने सेट किया चौड़ाई तथा ऊंचाई आवरण, बटन, और बटन के गुणों का सामना करते हैं, और उन्हें सापेक्ष / निरपेक्ष स्थिति तकनीक का उपयोग करके स्थिति देते हैं.

 .फ्लिपबटनवॉपर चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; स्थिति: रिश्तेदार;  .flipBtn, .flipBtn_face चौड़ाई: 100%; ऊंचाई: 100%; स्थिति: निरपेक्ष;  

3. स्टाइल 3 बटन चेहरे

हम सामने और पीछे बटन चेहरों के लिए पृष्ठभूमि-चित्र जोड़ते हैं, और दोनों के लिए छवियों के पीछे एक शांत रैखिक-ढाल सेट करते हैं। यहाँ ट्रिक यह है कि CSS में, आप एक ही तत्व के लिए कई इमेजेज को बैकग्राउंड इमेज के रूप में सेट कर सकते हैं, और आप ग्रेडिएंट्स को बैकग्राउंड इमेज के रूप में भी घोषित कर सकते हैं.

बीच का चेहरा, .flipBtn_mid, दिया जाता है a ऊंचाई 20px का, और सामने और पीछे के चेहरों के बीच 20px का एक ही स्थान बनाया गया है। हम बाद का उपयोग करके प्राप्त करते हैं translateZ () सीएसएस समारोह है कि Z- अक्ष के साथ एक तत्व को स्थानांतरित करता है. हम पीछे के चेहरे को 10px तक आगे बढ़ाते हैं, और सामने के चेहरे को 10px तक आगे लाते हैं.

 .flipBtn_front बैकग्राउंड-इमेज: url ("image / css-3d-फ्लिप-बटन-एनीमेशन-play.png"), लीनियर-ग्रेडिएंट (# FF6366 50%, # FEA56E); बैकफेस-दृश्यता: छिपा हुआ; रूपांतर: TranslZ (10px);  .flipBtn_back बैकग्राउंड-इमेज: url ("इमेज / css-3d-फ्लिप-बटन-एनीमेशन-पॉज.पून"), लीनियर-ग्रेडिएंट (# FF6366 50%, # FEA6E) पृष्ठभूमि-रंग: नीला; रूपांतर: TranslZ (-10px);  .flipBtn_mid height: 20px; पृष्ठभूमि-रंग: # d5485a; परिवर्तन: रोट्रेक्स (90 डीजी); शीर्ष: -10 पीएक्स; 

सेवा मेरे अंतरिक्ष को कवर करें बीच के सामने और पीछे के चेहरों के साथ, हम बीच का चेहरा सपाट रखना का उपयोग करके 3 डी अंतरिक्ष के एक्स-प्लेन के पार परिवर्तन: रोट्रेक्स (90 डीजी); नियम है कि इसे लंबवत बनाता है वाई-प्लेन पर फ्रंट और बैक दोनों बटन फेस करते हैं.

चूँकि मध्य-तल को x-समतल पर समतल रखा गया था, y- अक्ष पर इसका शीर्ष बिंदु मूल से 10px (इसकी ऊँचाई का आधा) नीचे जाता है। इसलिए, इसे वापस खींचने के लिए और दो अन्य बटन चेहरों के साथ इसके शीर्ष को संरेखित करें, मैंने जोड़ा शीर्ष: -10px साथ ही शासन करें.

मैंने इस्तेमाल किया backface दृश्यता फ्रंट फेस के लिए सीएसएस प्रॉपर्टी, इसलिए जब हम बटन को फ्लिप करते हैं, तो फ्रंट फेस का बैक दिखाई नहीं देगा.

अब तक, आपको केवल स्क्रीन पर सामने का चेहरा दिखाई देगा, क्योंकि एक्स-प्लेन दृश्य से छिपा हुआ है, और वाई-प्लेन (स्क्रीन) पर अंतिम चेहरा सामने रखा गया था. बटन को घुमाकर आप अन्य चेहरों को भी देख पाएंगे.

4. बटन को घुमाना

ट्रांस्फ़ॉर्म-स्टाइल CSS गुण यह निर्धारित करता है कि HTML तत्व के बच्चे तत्व सपाट प्रदर्शित किए गए हैं, या 3D स्पेस में स्थित हैं। नीचे दिए गए कोड स्निपेट में, परिवर्तन-शैली: संरक्षित-डी; नियम हमारे बटन को 3 डी वॉल्यूम देता है, जबकि रूपांतर: रोटेक्सएक्स () संपत्ति एक्स-अक्ष के चारों ओर घूमती है.

 .फ्लिपबटन ट्रांसफ़ॉर्म-स्टाइल: प्रिजर्व -3 डी; परिवर्तन: रोटेक्सएक्स (-120 डीजी);  

ध्यान दें कि मैंने इस्तेमाल किया -120deg पूरी तरह से प्रदर्शन उद्देश्यों के लिए, इस तरह से यह बताना आसान है कि बटन रोटेशन कैसे काम करता है.

हालाँकि अगले चरण में हम इसे बदल देंगे -180deg बटन को पूरी तरह से चारों ओर फ्लिप करने के लिए.

5. बटन एनिमेटेड

इस बिंदु पर, हमारा 3D बटन अभी भी एनिमेटेड नहीं है। हम इसका उपयोग करके कर सकते हैं संक्रमण संपत्ति। हम उपयोग करते हैं परिवर्तन पहले मूल्य के लिए संपत्ति, क्योंकि यह वह संपत्ति है जिसके लिए हम संक्रमण प्रभाव को लागू करना चाहते हैं। दूसरा मान, अवधि है, 2s.

आइए बटन को केवल होवर पर घुमाएं, ताकि इसके बजाय .flipBtn चयनकर्ता, का उपयोग करें .फ्लिपबटनवेयर: होवर .flipBtn. जैसा कि पहले उल्लेख किया गया है, के मूल्य को भी बदलें rotateX () सेवा मेरे -180deg बटन को चारों ओर फ्लिप करने के लिए.

 .फ्लिपबटन संक्रमण: परिवर्तन 2 एस; परिवर्तन-शैली: संरक्षित-डी;  .flipBtnWrapper: hover .flipBtn ट्रांस्फ़ॉर्म: रोटेक्सएक्स (-180deg); 

ध्यान दें कि गितुब रेपो में, मैं प्रत्येक बटन के लिए एक चेकबॉक्स जोड़ा गया एनीमेशन को आग लगाने के लिए : जाँच इसके बजाय : मंडराना, इस तरह यह एक वास्तविक बटन की तरह अधिक व्यवहार करता है। मैंने चार फ्लिप दिशाओं के साथ चार अलग-अलग बटन भी शामिल किए (टॉप → बॉटम, बॉटम → टॉप, राईट → लेफ्ट और लेफ्ट → राईट), ताकि आप जो चाहें आसानी से उपयोग कर सकें.

• डेमो देखें
• स्रोत डाउनलोड करें