दिलचस्प पोस्ट
विशेषता मूल्य पर आधारित DOM में एक तत्व ढूंढें पिनरी एपीआई दस्तावेज़ीकरण अधिक से अधिक 2 दशमलव स्थानों पर गोल करें (यदि आवश्यक हो तो) साधारण स्पष्टीकरण PHP OOP बनाम प्रक्रियात्मक? SQL सर्वर में किसी VARCHAR से गैर-संख्यात्मक वर्ण निकालने का सबसे तेज़ तरीका डीएलएल के x64 या x32 संस्करण को लोड करने के लिए साइड-बाय-साउन्ड असेंबलियों का उपयोग करना अतुल्यकालिक जावास्क्रिप्ट निष्पादन कैसे होता है? और जब रिटर्न स्टेटमेंट का उपयोग नहीं करते हैं? विंडोज बैच फाइलों की छिपी हुई विशेषताओं स्क्रीन पर एक पॉपअप विंडो केंद्र? उस फ़ंक्शन के भीतर से फ़ंक्शन का नाम कैसे प्राप्त करें? मैं एक ही आईडी के साथ सभी तत्वों के लिए jQuery फ़ंक्शन कैसे लागू करूं? Android Marshmallow में किसी सेवा से अनुमतियों का अनुरोध कैसे करें जावा में एक विधि के अंदर कक्षा परिभाषाओं का उपयोग करें Google App Engine में फ़ाइलें अपलोड करें setValue: forUndefinedKey: यह वर्ग कुंजी के लिए मूल्य मान कोडन-अनुरूप नहीं है

वेबकिट ट्रांससेट 3 डी के बाद सीएसएस जेड इंडेक्स खो गया

मेरे पास दो बिल्कुल तैनात किए गए div तत्व हैं जो ओवरलैप करते हैं। दोनों ने सीएसएस के जरिए जेड-इंडेक्स वैल्यू निर्धारित की है। मैं स्क्रीन के इन तत्वों को एनिमेट करने के लिए translate3d वेबकिट ट्रांस्फ़ॉर्म का उपयोग करता हूं, और फिर स्क्रीन पर वापस। परिवर्तन के बाद, तत्व अब अपने सेट z-index मूल्यों का सम्मान नहीं करते हैं।

क्या कोई ये बता सकता है कि जब मैं एक वेबकिट उन पर परिणत करता हूं तो क्या वे div तत्वों के z-index / stack-order का क्या होता है? और बताइए कि मैं div तत्वों के स्टैक-ऑर्डर को रखने के लिए क्या कर सकता हूँ?

यहां पर कुछ और जानकारी दी गई है कि मैं कैसा परिणत कर रहा हूं।

रूपांतरण से पहले, प्रत्येक तत्व सीएसएस के माध्यम से सेट किए गए इन दो वेबकिट संक्रमण मानों को प्राप्त करता है (मैं .css() फ़ंक्शन कॉल करने के लिए jQuery का उपयोग कर रहा हूं:

 element.css({ '-webkit-transition-duration': duration + 's' }); element.css({ '-webkit-transition-property': '-webkit-transform' }); 

तो तत्व अनुवादित 3 डी-वेबकीट-रूपांतरण का उपयोग करके एनिमेटेड होता है:

 element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' }); 

बीटीडब्ल्यू, मैंने 3 डी स्पेस में स्टैक-ऑर्डर को दोहराने की कोशिश करने के लिए translate3d के 3 डी पैरामीटर को कई अलग-अलग मानों पर सेट करने की कोशिश की है, लेकिन कोई भाग्य नहीं है।

इसके अलावा, आईफोन / आईपैड और एंड्रॉइड ब्राउज़र्स मेरा लक्ष्य ब्राउज़र है कि इस कोड को चलाने की जरूरत है। दोनों समर्थन वेबकिट संक्रमण

वेब के समाधान से एकत्रित समाधान "वेबकिट ट्रांससेट 3 डी के बाद सीएसएस जेड इंडेक्स खो गया"

यह इससे संबंधित हो सकता है: https://bugs.webkit.org/show_bug.cgi?id=61824

मूलतः जब आप z- अक्ष पर एक 3D परिणत लागू करते हैं, तो z- इंडेक्स अब और नहीं खाते (अब आप एक 3 आयामी रेंडरिंग विमान में हैं, विभिन्न z- मानों का उपयोग करें)। यदि आप बाल तत्वों के लिए 2 डी रेंडरिंग पर वापस स्विच करना चाहते हैं, तो transform-style: flat; उपयोग करें transform-style: flat;

यह सबसे निश्चित रूप से बग से जुड़ा हुआ है जो समी-डेलक्स द्वारा वर्णित है। यह केवल किसी भी तत्व को प्रभावित करना चाहिए जो पूर्ण या रिश्तेदार के रूप में तैनात हैं। इस मुद्दे को हल करने के लिए, आप प्रत्येक तत्व को निम्नलिखित सीएसएस स्टेटमेंट लागू कर सकते हैं जो इस तरह से तैनात है और समस्याएं पैदा कर रहा है:

 -webkit-transform: translate3d(0,0,0); 

यह वास्तव में परिवर्तन करने के बिना तत्व में परिवर्तन लागू करेगा, लेकिन इसके रेंडर आदेश को प्रभावित करेगा ताकि यह समस्या के कारण तत्व से ऊपर हो।

इससे थोड़ा देर हो गई, लेकिन उन तत्वों को डालने की कोशिश करें, जिन्होंने अपना Z-इंडेक्स निम्न को खो दिया है, हाल में कुछ लंबन सामग्री करते समय मुझे एक समस्या थी और इससे बड़े पैमाने पर मदद मिली।

 transform-style: preserve-3d; 

यह डालकर बचाता है

 transform: translate3d(0,0,0); 

अन्य तत्वों पर जो GPU पर अधिक दबाव डालते हैं

उदाहरण देखने की प्रतीक्षा कर रहा है

क्या आपने एक परिवर्तन पैमाने (1) करने की कोशिश की है? मुझे एक ऐसी समस्या है याद है, और मुझे तत्वों के एचटीएमएल ऑर्डर को पुन: व्यवस्थित करना पड़ा, और एक परिवर्तन का उपयोग करना था, जिसे मुझे इसकी ज़रूरत नहीं थी, क्योंकि परिणत के उपयोग के z- इंडेक्स बदलते हैं।

अगर मैं त्रुटि में नहीं हूं, तो हर बार जब आप ट्रांसफ़ॉर्मेशन का उपयोग करते हैं, तो यह सबसे ज़्यादा जेड-इंडेक्स उपलब्ध होता है, और यह टैग के शुरू होने के करीब के html तत्व के द्वारा आदेश दिया जाता है। तो ऊपर से नीचे तक।

मुझे उम्मीद है कि यह सहायता

z-index 3 डी ट्रांसफ़ाइड डिविज़ के खिलाफ काम करेगा यदि आप stackable तत्व को -webkit-transform: translateZ(0px); साथ स्टाइल करते हैं -webkit-transform: translateZ(0px);

कोडपेन पर स्निपेट -> http://codepen.io/mrmoje/pen/yLIul

उदाहरण में, बटन stack up और stack down बढ़ाते हैं और घुमाए गए तत्व (इस मामले में एक आईएमजी) के खिलाफ पाद लेख के z- इंडेक्स (+/- 1) कम करते हैं।

मैं यहां बताई गई समस्या को पुन: उत्पन्न करने में सक्षम नहीं हूं। भले ही मैं क्या करता हूं, Z-index मान को सभी परिवर्तनों में रखा जाता है। मैं क्रोमियम (Google Chrome) का प्रयोग कर रहा हूं

अनुवाद 3 डी फंक्शन का तीसरा तर्क तर्क के z- अक्ष को जोड़ता है। अवधारणा के समान है, लेकिन बिल्कुल नहीं, z- सूचकांक … कम z- अक्ष वाले तत्व उच्च मूल्य वाले तत्वों के अंतर्गत हैं।

मुझे पता है कि आप अपने इरादे वाले जेड-इंडेक्स से मिलान करने के लिए तीसरे तर्क के मूल्यों की कोशिश करते हैं, लेकिन समस्या यह है कि जेड-अक्ष CSS3 एनीमेशन के दौरान परिवर्तित नहीं होता है निम्नलिखित उदाहरण में, शीर्ष पर होना चाहिए, लेकिन # एलिमेंट_ए शीर्ष पर रहता है।

यदि मैं नियमित चयनकर्ता और हॉवर चयनकर्ता दोनों के लिए एक z- अनुक्रमणिका जोड़ता हूं, तो यह काम करने लगता है और hovered तत्व को शीर्ष-सबसे अधिक होने की अनुमति देता है

यद्यपि यह ठीक वही नहीं है जो आप चाहते थे, यह व्यवहार एक समाधान प्रदान करता है प्रारंभिक रेंडरिंग के लिए ऑर्डर सेट करने के लिए आपको बस 3 डी और जेड-इंडेक्स का उपयोग करने की आवश्यकता है

 <style> div { width: 300px; height: 150px; background-color: white; border: 5px outset gray; float: left; margin: 20px; -webkit-transition: 2s; } #element_a { -webkit-transform: translate3d(0, 0, 50px); } #element_b { -webkit-transform: translate3d(0, 0, 100px); } #element_a:hover { -webkit-transform: translate3d(100px, 0, 60px); } #element_b:hover { -webkit-transform: translate3d(-100px, 0, -60px); } </style> <body> <div id="element_a"> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"> </div> <div id="element_b"> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"> </div> </body> 

इसके चारों ओर एक और तरीका यह है कि आप एक मूल तत्व बना सकते हैं और इसके संबंधित अन्य सभी संक्रमण लागू कर सकते हैं:

 # Apply transitions to a parent div <div> # This image z-index -1 <img src="foo"/> # This image z-index -3 <img src="bar"/> #This image z-index -2 <img src="gg"/> </div> 

JsFiddle