css - WebKit：是否有任何 css 技巧可以将元素放在前面而不缩放它？

Question

从图片中，我使用 rotate3d() 到红色矩形，所以它的一半在黑色矩形的前面，另一个在后面。

我希望黑色矩形在红色矩形的前面所以我必须使用 translateZ() 所以它变成

问题是我希望黑色矩形在前面而不缩放它。我希望黑色矩形仍然是相同的大小。有什么诀窍吗？我尝试了 z-index 但它没有用。我猜是因为我使用 rotate3d()。

提前致谢。

Answer 1

我目前无法访问 Safari 来测试它，所以我把它留给你（让我知道它是否有效），但我相信以下应该有效。

由于浏览器解释-webkit-perspective似乎是我在回答这个问题时指出的问题，因此将其删除#container并替换为-webkit-transform: perspective(500)，然后将相同的东西 ( -webkit-transform: perspective(500)) 添加到两者中#parent，#parent2这就是我在这个小提琴中所做的。

问题似乎是 Safari 在使用时没有应用视角，而 Chrome 则#container在使用。正如我在回答另一个问题-webkit-perspective时所讨论的那样，这似乎是对规范的解释问题。