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

我在 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错误,有没有办法解决这个问题？

解决方法

我在Chrome / WinXP上遇到过这个错误.
您可以使用以下方法作为解决方法：

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/