为什么Webkit Transform会覆盖元素的z-index值？

Question

我有两个DIV重叠在一起，可以实现卡片翻转效果。请参见jsFiddle。DIV上面有一个Flip按钮，点击后会向容器添加“flipped”类来显示背面幻灯片。

问题在于：当背面幻灯片进入视图时，-webkit-transform: rotateY(180deg)值似乎覆盖了“Flip”按钮的z-index值，使得任何位于堆叠DIV上方的元素都被放到了背面。

我在研究这个问题时找到了这个stackoverflow问题，但是添加-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代码。

- raeq

Answer 1

问题在于当你在进行3D工作时，大多数z维度必须设置为3D。而z-index变得越来越不相关。

您可以通过将按钮移到前面（在3D中）来解决问题。

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

fiddle

- vals