我在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错误,有什么方法可以解决这个问题吗?
答案 0 :(得分: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/
答案 1 :(得分:2)
尝试添加一个translateZ来伴随你的轮换:
所以直接卡是:
-webkit-transform: rotateY(0deg) translateZ(2px);
翻转卡是:
-webkit-transform: rotateY(180deg) translateZ(-2px);
应该没有深度冲突,因为卡的两侧仍然会隐藏背面可见性。
答案 2 :(得分:0)
如果在我的cordova安卓应用程序上报告了这个错误..他们在4.1.2 .. gs2 ..安装在genymotion上,并且在翻转时改变了背面的索引,使其高于正面。它有效。它被打破了这一年一年。 :\