Android浏览器和背面能见度问题 [英] Android browser and backface-visibility problems

问题描述

我有实现的3D转换（特别是Y轴旋转）的机器人WebKit浏览器的麻烦。 我实现类似于此示例：<一href="http://desandro.github.com/3dtransforms/examples/card-01.html">http://desandro.github.com/3dtransforms/examples/card-01.html 但似乎 -webkit-背面可见性; rotateY（180deg）：隐藏; -webkit-变换翻转C $ C>并没有任何影响，因为DIV的背面始终可见。下面是Android模拟器运行4.1的屏幕截图：

I'm having trouble implementing a 3d transform (specifically a Y axis rotation) in Androids webkit browser. My implementation is similar to this example: http://desandro.github.com/3dtransforms/examples/card-01.html A div is flipped through -webkit-transform: rotateY( 180deg ); but it seems that -webkit-backface-visibility: hidden; does not have any effect, as the backside of the div is always visible. Here is a screenshot from the Android emulator running 4.1:

这是怎么回事呢？这个例子是工作的罚款iOS上的Safari浏览器。 这是一个已知的Andr​​oid漏洞，有没有什么办法来解决呢？

What is going on here? The example is working fine on iOS safari. Is this a known Android bug, is there any way to work around this?

推荐答案

我经历了镀铬/ WinXP的藏汉这个bug。
您可以使用以下作为一种变通方法：

I experienced this bug on Chrome/WinXP aswell.
You could use the following as a workaround:

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

我使用的是线性回落至能时间的z-index掉。
您可能需要玩的视角一点点。

I'm using the linear easing to be able to time the z-index swap.
You might need to play around with the perspective a little bit.

的jsfiddle： http://jsfiddle.net/dwUvR/3/

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

这篇关于Android浏览器和背面能见度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！