為什么webkit轉換會覆蓋元素的z-index值？

Question

所以我有兩個div疊在一起，做一個卡片翻轉效果。 見jsFiddle 。 DIV頂部有一個翻轉按鈕，點擊后會在容器中添加一個“翻轉”類，將后滑動翻轉到視圖中。

這就是問題：當后面的幻燈片進入視圖時， -webkit-transform: rotateY(180deg)值似乎覆蓋了“翻轉”按鈕的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。

Answer 1

問題是，當您使用3D工作時，大多數z維度必須以3D形式設置。 並且z指數變得越來越不相關。

您可以解決問題，將按鈕置於前面（3D）

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

小提琴