Problemy z przeglądarką Androida i widocznością od strony tylnej

Question

Mam problem z zaimplementowaniem transformacji 3D (w szczególności rotacji osi Y) w przeglądarce internetowej Androids. Moja implementacja jest podobna do tego przykładu: http://desandro.github.com/3dtransforms/examples/card-01.html Element div jest odwracany przez -webkit-transform: rotateY(180deg);, ale wygląda na to, że -webkit-backface-visibility: hidden; nie ma żadnego efektu, ponieważ tylna część elementu div jest zawsze widoczna. Oto zrzut ekranu z emulatora Androida z systemem 4.1:

Co tu się dzieje? Przykład działa poprawnie w Safari na iOS. Czy jest to znany błąd Androida, czy istnieje sposób obejścia tego problemu?

Answer 1

Doświadczyłem tego błędu również w Chrome/WinXP.
Można użyć następujących jako obejście:

HTML

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

CSS

.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); 
} 
​ 

Używam liniowy łagodne, aby móc czasie Z- zamiana indeksów.
Być może będziesz musiał trochę zagrać z perspektywą.

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

Answer 2

Spróbuj dodać translateZ do towarzyszenia obroty:

Tak prosto karta jest:

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

i odwrócenie karty to:

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

nie powinno być żadnych konfliktów głębokość ponieważ zarówno boki karty będą nadal ukryte pod kątem widoczności.

Answer 3

Gdyby ten błąd zgłaszane na moim Cordova Android App .. byli na 4.1.2 .. GS2 .. zainstalowaniu go na genymotion i zmieniłem indeks na odwrocie, gdy odwrócony, być wyżej niż z przodu .. i działa. tak było złamane przez rok. : \