आईओएस उपकरणों पर एनिमेट करते समय एनिमेटेड तत्व एक दूसरे के बदलते (जेड-इंडेक्स स्थिति) के शीर्ष पर खड़े हो गए हैं?

Question

JS FIDDLE

मेरे पास 2 एनिमेटेड तत्व हैं। एक साधारण रोटेशन स्क्रिप्ट है जो लोगो के मध्य भाग को सिक्का की तरह घूमती है।

अन्य एनीमेशन लोगो के पीछे कण कैनवास धूम्रपान एनीमेशन है जो आप देखते हैं कि मध्य भाग फ़्लिपिंग हो रहा है।

मेरी समस्या यह है कि कैनवास धुआं एनीमेशन अपनी स्थिति बदलता है और सिक्का फ़्लिपिंग एनीमेशन पीछे जाता है और धुआं कैनवास एनीमेशन के सामने स्वयं को छुपाता है या फ्लिपिंग एनीमेशन शुरू होने पर लगभग जेड-इंडेक्स स्थिति बदलता है ...

यह केवल आईफोन और सेब डिवाइस पर होता है। लेकिन एंड्रॉइड और डेस्कटॉप पर ठीक काम करता है। यदि आप कैनवास को हटाते हैं तो फ्लिपिंग एनीमेशन बिना किसी समस्या के महान काम करता है .. लेकिन यदि कैनवास वहां है तो फ्लिप एनीमेशन शुरू होने के बाद फ्लिप एनीमेशन को कवर किया जाता है।

मैं अपने एनीमेशन का उपयोग तब तक नहीं कर सकता जब तक कि मुझे यह पता न लगे .. जो मुझे दुखी कर रहा है। lol

किसी भी मदद की बहुत सराहना की है! की जाँच करें मेरा पूरा JS FIDDLE

Answer 1

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

.animateVSS{ 
    /* ... */ 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

#myCanvas{ 
    /* ... */ 
    -webkit-transform: translateZ(-20000px) rotateY(0.1deg); 
    transform: translateZ(-20000px) rotateY(0.1deg); 
} 

संख्या -20,000 translateZ के लिए ऊपर के उदाहरण में मनमाने ढंग से है। जब तक आपको अधिक उपयोगी मूल्य न मिल जाए तब तक उनके साथ खेलें, लेकिन यह एक ठीक प्रारंभिक बिंदु है। यह perspective सेटिंग से जुड़ा हुआ है जो सेट पर भी प्रभाव डालता है कि z-position के लिए किस मान का उपयोग किया जाता है।

आप शायद -webkit- prefixed वेरिएंट के उपयोग के साथ ठीक कर सकते हैं क्योंकि यह केवल सफारी को प्रभावित करता है, लेकिन भविष्य के लिए इसे भी अपरिवर्तित करने की आवश्यकता हो सकती है।

आप मेरे कन्ववास के लिए जेड-इंडेक्स को भी हटा सकते हैं क्योंकि इसमें कोई टाइपो है, और अगर सही हो तो सही हो जाएगा।

Example fiddle