Firefox和Safari浏览器;t在'透视图'改变

Firefox and Safari don't respect z-index after 'perspective' change

本文关键字：透视图 改变 Safari 浏览器 Firefox      更新时间：2023-09-26

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

在Chrome/Internet Explorer上查看以上内容，无论方框如何倾斜，红色方框都将始终位于顶部。

然而，在Firefox和Safari中查看它，当倾斜角度足够陡时，蓝色框会流血通过。

它是由perspective引起的。有什么技巧可以让Firefox和Safari尊重z索引吗？

样本代码：

$(".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
  });
});

好吧，我对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索引。

相关文章：