CSS3 3 डी ट्रांसफॉर्म - विभिन्न जेड-इंडेक्स के साथ ओवरलैपिंग divs के पास वेबकिट ब्राउज़र

Question

के लिए अलग-अलग परिणाम हैं, मैं यह पता लगाने की कोशिश कर रहा हूं कि कौन सा ब्राउज़र इस अधिकार को लागू नहीं कर रहा है: मेरे पास एक दूसरे के शीर्ष पर स्थित 2 divs हैं। सामने के लिए मैं वाई धुरी घुमाता हूं और एक्स अक्ष का अनुवाद करता हूं। अब इसी के लिए मैंने दूसरे की तुलना में कम जेड-इंडेक्स सेट किया है। मुझे क्रोम/सफारी के लिए 2 अलग-अलग आउटपुट दिखाई देते हैं। कौन सा एक है जो अधिक समझ में आता है। यहां मेरा परीक्षण है: http://jsfiddle.net/f5VWN/

मुझे लगता है कि समस्या को छोटा किया जा सकता है: 3 डी स्पेस में 2 तत्व दिए गए हैं, क्या ज़ेड-इंडेक्स बिल्कुल मायने रखता है :)?

Answer 1

spec के अनुसार:

एक तब्दील तत्व के Z अक्ष पर स्थिति स्टैकिंग संदर्भ में आदेश को प्रभावित नहीं करता।

सफारी इसे गलत तरीके से प्रस्तुत कर रहा है। हालांकि, भले ही, मैं आपका लेआउट इस तकनीक पर निर्भर नहीं करता।

Answer 2

किसी तत्व के वंशज मूल रूप से माता-पिता के विमान में चले जाते हैं, इसलिए सामने और पीछे divs समान 3 डी स्पेस साझा नहीं कर रहे हैं। वे सिर्फ तब्दील हो जाते हैं और कंटेनर div के शीर्ष पर अलग-अलग रखे जाते हैं, जिससे पीछे div को सामने वाले div के शीर्ष पर खींचा जाता है। एक ही 3 डी अंतरिक्ष में तत्वों को बदलने के लिए, बच्चे divs करने के लिए 3 डी अतिव्यापी दे रही है, कंटेनर में preserve-3d को -webkit-transform-style गुण सेट: http://jsfiddle.net/f5VWN/2/

z- सूचकांक अभी भी मायने रखती है, खासकर जब दो तत्वों एक दूसरे पर व्याप्त।