jquery - 为什么 webkit 转换会覆盖元素的 z-index 值？

Question

所以我将两个 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 .

Answer 1

问题是，当您在 3D 中工作时，大多数 z 维度都必须在 3D 中设置。并且 z-index 变得越来越不相关。

您可以解决将按钮置于最前面(3D 模式)的问题

.btn-flip {
    ....
    -webkit-transform: translateZ(1px);
}

fiddle