我在
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模拟器的屏幕截图：
我的实现与此示例类似： http://desandro.github.com/3dtransforms/examples/card-01.html
div翻转-webkit-transform：rotateY(180deg);但似乎-webkit-backface-visibility：hidden;没有任何效果,因为div的背面总是可见的.以下是运行4.1的Android模拟器的屏幕截图：
解决方法@H_301_9@
我在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/
您可以使用以下方法作为解决方法：
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/
