Firefox和Safari不尊重z-index后的观点＆＃39;更改

Question

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

在Chrome / Internet Explorer上查看以上内容，无论盒子如何倾斜，红色框总是位于顶部。

然而，在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;
}

但你仍然需要Chrome和IE的z-index。