Android浏览器和背面可见性问题

Question

我在Androids webkit浏览器中实现3d变换(特别是Y轴旋转)时遇到了麻烦.我的实现类似于这个例子:http://desandro.github.com/3dtransforms/examples/card-01.html div被翻转-webkit-transform: rotateY( 180deg );但看起来-webkit-backface-visibility: hidden;没有任何效果,因为div的背面总是可见.以下是运行4.1的Android模拟器的屏幕截图:

这里发生了什么？这个例子在iOS Safari中运行良好.这是一个已知的Android错误,有没有办法解决这个问题？

Answer 1

我在 Chrome/WinXP 上也遇到了这个错误。
\n您可以使用以下方法作为解决方法：

\n\n

超文本标记语言

\n\n

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

\n\n

CSS

\n\n

.card {\n    width: 150px;\n    height: 200px;\n\n    position: absolute;\n    top: 50px;\n    left: 50px;\n\n    color: #FFF;\n    font-size: 100px;\n    text-align: center;\n}\n\n#card1 {\n    background-color: #F00;\n    z-index: 1;\n}\n\n#card2 {\n    background-color: #00F;\n    z-index: 0;\n    -webkit-transform: rotateY(-180deg);\n}\n\n#container {\n    -webkit-perspective: 700px;\n}\n\n#container #card1 {\n    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear;\n}\n\n#container #card2 {\n    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear;\n}\n\n#container:hover #card1 {\n    z-index: 0;\n    -webkit-transform: rotateY(180deg);\n}\n\n#container:hover #card2 {\n    z-index: 1;\n    -webkit-transform: rotateY(0deg);\n}\n\xe2\x80\x8b\n

\n\n

我正在使用线性缓动来计算 z 索引交换的时间。
\n您可能需要稍微尝试一下视角。

\n\n

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

\n