एंड्रॉइड ब्राउज़र और बैकफ़ेस-दृश्यता समस्या

Question

मुझे एंड्रॉइड वेबकिट ब्राउज़र में 3 डी ट्रांसफॉर्म (विशेष रूप से एक वाई अक्ष रोटेशन) लागू करने में समस्या हो रही है। मेरा कार्यान्वयन इस उदाहरण के समान है: http://desandro.github.com/3dtransforms/examples/card-01.html एक div -webkit-transform: rotateY(180deg); के माध्यम से फ़्लिप किया गया है लेकिन ऐसा लगता है कि -webkit-backface-visibility: hidden; का कोई प्रभाव नहीं पड़ता है, क्योंकि div के पीछे की ओर हमेशा दिखाई देता है।

यहाँ क्या हो रहा है: यहाँ Android 4.1 चल रहा एमुलेटर से एक स्क्रीनशॉट है? उदाहरण आईओएस सफारी पर ठीक काम कर रहा है। क्या यह एक ज्ञात एंड्रॉइड बग है, क्या इस के आसपास काम करने का कोई तरीका है?

Answer 1

मुझे क्रोम/विनएक्सपी पर इस बग का अनुभव हुआ।
आप निम्न का उपयोग कर सकते एक समाधान के रूप:

एचटीएमएल

<div id="container"> 
    <div class="card" id="card1">1</div> 
    <div class="card" id="card2">2</div> 
</div> 

सीएसएस

.card { 
    width: 150px; 
    height: 200px; 

    position: absolute; 
    top: 50px; 
    left: 50px; 

    color: #FFF; 
    font-size: 100px; 
    text-align: center; 
} 

#card1 { 
    background-color: #F00; 
    z-index: 1; 
} 

#card2 { 
    background-color: #00F; 
    z-index: 0; 
    -webkit-transform: rotateY(-180deg); 
} 

#container { 
    -webkit-perspective: 700px; 
} 

#container #card1 { 
    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear; 
} 

#container #card2 { 
    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear; 
} 

#container:hover #card1 { 
    z-index: 0; 
    -webkit-transform: rotateY(180deg); 
} 

#container:hover #card2 { 
    z-index: 1; 
    -webkit-transform: rotateY(0deg); 
} 
​ 

मैं रैखिक समय z- करने में सक्षम होना आसान उपयोग कर रहा हूँ सूचकांक स्वैप।
आपको परिप्रेक्ष्य के साथ थोड़ा सा खेलना पड़ सकता है।

JsFiddle: http://jsfiddle.net/dwUvR/3/

Answer 2

एक translateZ जोड़ने की कोशिश अपने रोटेशन साथ देने के लिए:

तो सीधे ऊपर कार्ड है:

-webkit-transform: rotateY(0deg) translateZ(2px); 

और फ़्लिप कार्ड है:

-webkit-transform: rotateY(180deg) translateZ(-2px); 

होनी चाहिए क्योंकि दोनों कोई गहराई संघर्ष कार्ड के किनारे अभी भी बैकफेस दृश्यता छिपाएंगे।

Answer 3

था इस बग मेरी कॉर्डोबा Android एप्लिकेशन को सूचना दी .. वे 4.1.2 पर थे .. GS2 .. genymotion पर स्थापित है, और पीछे की ओर से मेरी सूचकांक बदल गया है, जब फ़्लिप, सामने की ओर से अधिक होने के लिए .. और यह काम करता है। यह एक साल के लिए इस तरह टूट गया है। : \