Z座標を無視して3D css transform divを発行

Question

口頭で説明するのはかなり複雑な問題です。でも、それが出てもっとだ「前に1を移動」ボタンをクリックした後、DIV1はまだDIV2で覆われている、私のMac上のFirefoxとChromeの両方を使用して

$("button").on("click",() => { 
 
\t $("#div1").css("transform","translateZ(50px)"); 
 
})

.testdiv { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    transition: transform 1s; 
 
    backface-visibility: hidden; 
 
} 
 

 
#container { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    perspective: 500px; 
 
} 
 

 
#div1 { 
 
    background-color: #f00; 
 
    margin-left: 50px; 
 
    transform: translateZ(10px); 
 
} 
 

 
#div2 { 
 
    background-color: #0f0; 
 
    transform: translateZ(30px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="div1" class="testdiv"> 
 
    1 
 
    </div> 
 
    <div id="div2" class="testdiv"> 
 
    2 
 
    </div> 
 
</div> 
 
<button>Move 1 to front 
 
</button>

：このスニペットを見てみましょう（translateZ値が高い）。私の期待は、div2はdiv2をz軸上のdiv2を超えるとカバーしなければならないということです。

Safariにはこの問題はありません。Safariで実行できるようになったら、私が説明しようとしていることがわかります。私はSafariの実装が優れていると言っているわけではありませんが、実際には私が探している動作です。 ChromeとFirefoxで同じ効果を達成する方法はありますか？

Answer 1

このメッセージは、コンテナにtransform-style: preserve-3dを追加することで解決します。