7

我在 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 模拟器的屏幕截图：

前面的div在哪里？

这里发生了什么？该示例在 iOS Safari 上运行良好。这是一个已知的Android错误，有没有办法解决这个问题？

4

3 回答 3

3

尝试添加 translateZ 来伴随您的旋转：

所以直接卡是：

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

翻转的卡片是：

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

应该没有深度冲突，因为卡片的两面仍然会隐藏背面可见性。

于 2012-12-18T21:18:53.423 回答
3

我在 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/

于 2012-12-23T22:57:39.843 回答
0

在我的cordova android应用程序上报告了这个错误..他们在4.1.2 .. gs2 ..将它安装在genymotion上，并在翻转时将我的背面索引更改为高于正面..它作品。它已经这样坏了一年了。:\

于 2014-12-22T23:26:11.063 回答