Trình duyệt Android và các vấn đề về khả năng hiển thị ngược lại

Question

Tôi đang gặp sự cố khi triển khai chuyển đổi 3d (cụ thể là xoay trục Y) trong trình duyệt webkit của Android. Việc triển khai của tôi tương tự như ví dụ này: http://desandro.github.com/3dtransforms/examples/card-01.html Một div được lật qua -webkit-transform: rotateY(180deg); nhưng có vẻ như -webkit-backface-visibility: hidden; không có bất kỳ ảnh hưởng nào vì mặt sau của div luôn hiển thị. Đây là một ảnh chụp màn hình từ các giả lập Android chạy 4.1:

gì đang xảy ra ở đây? Ví dụ này hoạt động tốt trên safari iOS. Đây có phải là lỗi Android đã biết, có cách nào để giải quyết vấn đề này không?

Answer 1

Tôi đã gặp phải lỗi này trên Chrome/WinXP.
Bạn có thể sử dụng sau đây như một cách giải quyết:

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

Tôi đang sử dụng tuyến tính giảm bớt để có thể thời gian z- trao đổi chỉ mục.
Bạn có thể cần phải chơi xung quanh với quan điểm một chút.

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

Answer 2

Hãy thử thêm một translateZ đi cùng quay của bạn:

Vì vậy thẳng lên thẻ là:

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

Và lật thẻ là:

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

Không nên có mâu thuẫn sâu sắc vì cả hai các mặt của thẻ vẫn sẽ có ẩn hiển thị mặt sau.

Answer 3

Đã lỗi này báo cáo trên ứng dụng android cordova tôi .. họ trên 4.1.2 .. GS2 .. cài đặt nó trên genymotion, và thay đổi chỉ số của tôi về phía sau, khi lật, cao hơn mặt trước .. và nó hoạt động. nó bị vỡ như thế này trong một năm. : \