控制CSS 3D变换元素的相交

我一直在尝试CSS 3D转换，我不明白为什么除了Safari之外，我在其他浏览器中没有得到预期的结果

基本上，我有两个兄弟元素，它们彼此重叠（在相同的z索引上）。如果我把一个

transform:rotateX（xdeg）

放在其中一个元素上，而另一个元素保持不变，那么我希望看到转换后的元素的一半隐藏在未触及的元素后面，而另一边突出

HTML:

小提琴使用相同的代码

变换元素的底部不会显示在未触及的元素前面，尽管理论上在三维空间中更接近。然而，正如我在Safari中所期望的那样，这确实有效。我错过什么了吗？我试着明确地将它们放在同一个z索引上，甚至嵌套内部索引，但似乎没有任何效果。我可能只是在装傻，但请帮帮我

---

感谢

子元素被一个接一个地渲染到父元素的平面上。您需要在父对象上设置

变换样式：preserve-3d

，以防止出现这种情况（）：

有关MDN的更多信息：

---

（我不确定这一点是否早在2014年你提出这个问题时就存在，但现在它在2019年起作用。）

不，我要说的更多的是这两个元素的交叉点（为了反映这一点，我更改了标题）。它们应该像在狩猎中那样相交，黑色环的背面隐藏在橙色元素后面，但前面是可见的，因为它在前面。啊，我现在明白了。你想让黑线穿过橙色线。我担心目前不可能让元素通过CSS中的其他元素（可能是WebGL？我不确定）。我的建议是，通过剪掉黑色线条的顶部，然后将其放在橙色正方形的前面，然后旋转它，使其与您想要显示的内容等效。它会让人产生同样的幻觉是的，我最终还是求助于它。我真的很希望没有它是可能的，但是，它在狩猎中工作得非常完美！我确信这在WebGL中是可能的。无论如何，谢谢。

<div class="container">
    <div class="outer"></div>
    <div class="inner"></div>
</div>

.container{
    position: relative;
    margin: 100px;
    -webkit-perspective: 30em;
    perspective: 30em;
}
.outer{
    -webkit-transform: rotateX(45deg);
    transform: rotateX(45deg);
    position: absolute;
    top: 0;
    left:0;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:5px black solid;
}
.inner{
    position: absolute;
    top: 5px;
    left: 5px;
    background: orange;
    width: 90px;
    height: 90px;
    transform: rotate
}

.container{
    ...
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}