Firefox和Safari不尊重後「視角」的變化

Question

https://jsfiddle.net/zdoe56yr/1/

鑑於上述在Chrome/Internet Explorer和紅色方框的z-index將永遠是在上面，不管如何箱歪斜。

但是，在Firefox和Safari中查看它，當傾斜角度足夠大時，藍色框會流血。

它是由perspective造成的。是否有任何黑客可以讓Firefox和Safari尊重z-index？

示例代碼：

$(".background").on("mousemove", function(e) { 
    var ax = -($(window).innerWidth()/2 - e.pageX)/5; 
    var ay = ($(window).innerHeight()/2 - e.pageY)/5; 
    TweenMax.set(".red, .blue", { 
    rotationX: ay, 
    rotationY: ax 
    }); 
}); 

Answer 1

好吧，我有一個CSS的這一部分沒有經驗，但看起來，如果你會做紅色的小廣場和感謝translate3D，你將前鋒的位置，這樣它具有與正方形相似的尺寸，然後工作（在Firefox上測試）。

問題是，如果這個解決方案是對你罰款：

https://jsfiddle.net/zdoe56yr/3/

.red { 
    position: relative; 
    z-index: 2; 
    transform: translate3d(0px, 0px, 200px); 
    margin-top: -15%; 
    background: red; 
    width: 75px; 
    height: 75px; 
} 

但你仍然需要一個z-index的Chrome和IE瀏覽器。