安卓浏览器和背面可见性问题

Question

我在Android的Webkit浏览器中实现3D变换（特别是Y轴旋转）遇到了问题。 我的实现类似于这个例子：http://desandro.github.com/3dtransforms/examples/card-01.html 通过-webkit-transform: rotateY( 180deg );翻转一个div，但看起来-webkit-backface-visibility: hidden;没有任何效果，因为div的背面始终可见。以下是运行Android模拟器4.1时的截图：

这里到底发生了什么？在iOS Safari上，这个例子运行得很好。 这是一个已知的Android bug吗？有没有办法解决？

- Eelke

---

可能是重复问题 https://dev59.com/-Gs05IYBdhLWcg3wFOC8 - Rafael Herscovici

Answer 1

我在Chrome/WinXP上也遇到了这个bug。
你可以使用以下方法作为解决方法：

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交换。 你可能需要稍微调整一下透视角度。

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

- user625860

Answer 2

尝试添加一个translateZ来配合你的旋转效果：

因此，直立的卡片是：

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

翻转的卡片是:

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

由于卡片的两侧仍将保持背面可见性隐藏，因此不应存在深度冲突。

- chrisgonzalez

---

似乎没有任何效果（Android 4.0/4.1） - Eelke

Answer 3

我的 Cordova Android 应用程序报告了这个错误... 他们使用的是 4.1.2 版本的 GS2.. 我在 Genymotion 上安装了它，并将背面的索引值调整为高于前面的索引值，当翻转时，它就可以正常工作了。这个问题已经存在了一年了。:\

- jfaron