केवल सीएसएस

का उपयोग करके एक बॉक्स फ्लैप ओपन इफेक्ट बनाना, मैंने संक्रमणों का उपयोग करके इस प्रभाव को बनाने की कोशिश की। ऐसा लगता है कि आप एक बॉक्स खोल रहे हैं।केवल सीएसएस

जिस क्रम में बॉक्स बंद कर देता है के रूप में जिसमें यह खोलता ही है:

2 समस्याएं हैं। क्या इसके खोलने के विपरीत क्रम में बॉक्स को बंद करने के लिए वैसे भी है ताकि बॉक्स उसी स्थिति में वापस जा सके जब यह बंद हो गया था?
लाल और नीले रंग के फ्लैप्स की वजह से संक्रमण के दौरान हरे और पीले रंग के फ्लैप्स के सिरों को छुपाया जाता है, इसलिए यह 3 डी नहीं दिखता है। क्या कोई तरीका है कि मैं 3 डी तरीके से सभी फ्लैप्स दिखा सकता हूं?

अगर समाधान शुद्ध सीएसएस में था मैं पसंद करेंगे, कोई जावास्क्रिप्ट करें।

#box { 
 
    position: relative; 
 
    top: 170px; 
 
    left: 170px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    perspective: 800px; 
 
} 
 
#flap1, #flap2, #flap3, #flap4 { 
 
    position: absolute; 
 
} 
 
#flap1 { 
 
    background-color: red; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform-origin: 0 0; 
 
    transition: transform 1s; 
 
} 
 
#flap2 { 
 
    left: 150px; 
 
    background-color: blue; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform-origin: 100% 0; 
 
    transition: transform 1s ease 0.3s; 
 
} 
 
#flap3 { 
 
    background-color: green; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 0; 
 
    transition: transform 1s ease 0.6s; 
 
} 
 
#flap4 { 
 
    background-color: yellow; 
 
    top: 150px; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 100%; 
 
    transition: transform 1s ease 0.9s; 
 
} 
 
#box:hover #flap1{ 
 
    transform: rotateY(-170deg); 
 
} 
 
#box:hover #flap2{ 
 
    transform: rotateY(170deg); 
 
} 
 
#box:hover #flap3{ 
 
    transform: rotateX(170deg); 
 
} 
 
#box:hover #flap4{ 
 
    transform: rotateX(-170deg); 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <div id="box"> 
 
     <div id="flap1"></div> 
 
     <div id="flap2"></div> 
 
     <div id="flap3"></div> 
 
     <div id="flap4"></div> 
 
    </div> 
 
    </body> 
 
</html>

स्रोत

2016-05-26 Dhruv Chadha

1. मुझे लगता है कि आप नहीं कर सकते। बस एक और कक्षा या कुछ जोड़ें। 2।आप सीएसएस 3 ['परिप्रेक्ष्य'] का उपयोग कर सकते हैं (http://www.w3schools.com/cssref/css3_pr_perspective.asp) –

प्रश्न 1 के लिए:

आप :hover चयनकर्ताओं के लिए और डिफ़ॉल्ट चयनकर्ताओं के अंदर उलटे क्रम में आगे क्रम में देरी देते हैं, यह सटीक रिवर्स प्राप्त होगा एनीमेशन।

प्रश्न 2 के लिए:

ठीक और विवरण इस प्रकार हैं:

संक्रमण अवधि के भाग के लिए, हरे और पीले रंग बक्से मत देखो की तरह वे 3 डी प्रभाव है क्योंकि ऊपर z-index के साथ कुछ तत्व हैं जो ऊपर रखा जा रहा है। यह विस्तारित क्षेत्र (परिप्रेक्ष्य घूर्णन के कारण) को दिखने से रोकता है और इस प्रकार ऐसा लगता है कि यह केवल 2 डी है (जबकि यह वास्तव में नहीं है)। इसे दूर करने के लिए, हमें ब्राउज़र को ट्रांसफॉर्म के 3 डी पहलू को संरक्षित करने के लिए निर्देश देना होगा। यह transform-style: preserve-3d का उपयोग करके किया जाता है।
जब हम उपर्युक्त करते हैं, तो फ्लैप्स सभी 3 डी प्रभाव के साथ खुल जाएंगे, लेकिन एनीमेशन और उसके अंत की शुरुआत के करीब, जब नीली फ्लैप के लिए संक्रमण वास्तव में शुरू होता है और समाप्त होता है तो हम ब्लू फ्लैप पर एक झिलमिलाहट देखेंगे। ऐसा लगता है क्योंकि z-index प्रभाव डालता है जब 3 डी ट्रांसफॉर्म का उपयोग किया जाता है और z-index प्रभाव को खोने और preserve-3D प्रभाव से शुरू होने के बीच थोड़ी सी मात्रा होती है जिसके दौरान ब्लू फ्लैप अस्थायी रूप से पीछे जाता है। इसे संबोधित करने के लिए, z-index: 1 (जो translateZ(1px)) का 3 डी समकक्ष जोड़ा गया है। जेड-अक्ष में अनुवाद तत्व को आपकी आंखों में 1px के करीब लाता है और इसे पीले और हरे रंग के फ्लैप्स से ऊपर रखता है।
अंत में, उपरोक्त सभी के बावजूद, एनीमेशन आउट होवर के अंत में एक छोटी सी गड़बड़ है, जहां हरा झपकी नीली झपकी के माध्यम से दिखाई देती है। इस पर काबू पाने के लिए, मैंने देरी के समय को थोड़ा सा बदल दिया था।

(मैं मूल रूप से क्या उल्लेख करने के लिए विपरीत, translateZ(0px) की आवश्यकता नहीं है और हटाया जा सकता है।)

#box { 
 
    position: relative; 
 
    top: 170px; 
 
    left: 170px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    perspective: 800px; 
 
    transform-style: preserve-3d; 
 
} 
 
#flap1, #flap2, #flap3, #flap4 { 
 
    position: absolute; 
 
} 
 
#flap1 { 
 
    background-color: red; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform: translateZ(1px); 
 
    transform-origin: 0 0; 
 
    transition: transform 1s 1.5s; 
 
} 
 
#flap2 { 
 
    left: 150px; 
 
    background-color: blue; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform: translateZ(1px); 
 
    transform-origin: 100% 0; 
 
    transition: transform 1s ease 1s; 
 
} 
 
#flap3 { 
 
    background-color: green; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 0; 
 
    transition: transform 1s ease 0.5s; 
 
} 
 
#flap4 { 
 
    background-color: yellow; 
 
    top: 150px; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 100%; 
 
    transition: transform 1s ease; 
 
} 
 
#box:hover #flap1 { 
 
    transform: rotateY(-170deg) translateZ(1px); 
 
    transition: transform 1s ease; 
 
} 
 
#box:hover #flap2 { 
 
    transform: rotateY(170deg) translateZ(1px); 
 
    transition: transform 1s ease 0.5s; 
 
} 
 
#box:hover #flap3 { 
 
    transform: rotateX(170deg); 
 
    transition: transform 1s ease 1s; 
 
} 
 
#box:hover #flap4 { 
 
    transform: rotateX(-170deg); 
 
    transition: transform 1s ease 1.5s; 
 
}

<div id="box"> 
 
    <div id="flap1"></div> 
 
    <div id="flap2"></div> 
 
    <div id="flap3"></div> 
 
    <div id="flap4"></div> 
 
</div>

स्रोत

2016-05-26 09:17:24 Harry

पहले प्रश्न का अच्छा समाधान बहुत अच्छा था, और हालांकि दूसरा समाधान अच्छी तरह से काम करता है, मुझे नहीं पता कि कैसे z- सूचकांक समस्या को हल कर रहा है .... आप देखते हैं, यदि लाल और नीले रंग के फ्लैप्स का जेड-इंडेक्स 1 पीएक्स है, जो हरे और पीले रंग के बॉक्स से अधिक है, तो दूसरी समस्या अभी भी प्रबल नहीं होगी क्योंकि हरे और पीले रंग के बक्से अभी भी लाल और नीले रंग से नीचे हैं डिब्बा ? @ हैरी –

@ ध्रुव चाधः 'translateZ() 'लगभग 3 डी परिदृश्य के लिए' z-index' क्या करता है जैसा ही करता है। आप हरे और पीले रंग के नीचे अभी भी नीले और लाल रंग के नीचे सही हैं, लेकिन परत निर्माण (एक जटिल प्रतिपादन प्रक्रिया का हिस्सा) में 3 डी ट्रांसफॉर्म परिणाम जोड़ना जो व्यवहार को प्रभावित करता है। टिप्पणियों में व्याख्या करने में मुश्किल है। मैं जवाब में विस्तार करने की कोशिश करूंगा। मुझे कुछ समय दे। – Harry

@ ध्रुव चाध: मैंने कुछ अतिरिक्त स्पष्टीकरण जोड़ा है (और मूल उत्तर से भी गलती को सही किया है: डी)। देखें कि यह मदद करता है :) – Harry

केवल सीएसएस

उत्तर

संबंधित मुद्दे