所以我将两个 div 堆叠在一起,以实现卡片翻转效果。参见 jsFiddle .在 DIV 顶部有一个 Flip 按钮,单击它会向容器添加一个“翻转”类,将 Back Slide 翻转到 View 中。
问题来了:当向后滑动进入视野时,-webkit-transform: rotateY(180deg)
值似乎覆盖了“翻转”按钮的 z-index 值,因此任何东西在堆叠的 DIV 顶部放在后面。
我找到了 this stackoverflow question在研究这个问题时,添加 -webkit-transform: translate3d(0px, 0px, 0px)
对我没用。
这是 HTML 标记:
<div class="carousel-slide current">
<div class="flipper">
<div class="fl front">
<img src="http://placehold.it/411x274/ff9900/fff" />
</div>
<div class="fl back">
<img src="http://placehold.it/411x274/59a5d1/fff" />
</div>
</div>
<a class="btn-flip" href="#">Flip</a>
</div>
您可以在 jsFiddle 中查看 CSS/JS .
最佳答案
问题是,当您在 3D 中工作时,大多数 z 维度都必须在 3D 中设置。并且 z-index 变得越来越不相关。
您可以解决将按钮置于最前面(3D 模式)的问题
.btn-flip {
....
-webkit-transform: translateZ(1px);
}
关于jquery - 为什么 webkit 转换会覆盖元素的 z-index 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22163807/