Question

一直在试验CSS 3D变换，我很困惑为什么我没有在Safari以外的浏览器中获得预期的结果。

基本上我有2个兄弟元素在彼此的顶部（在相同的z-index上）。如果我把一个transform: rotateX(xdeg)放在另一个上并保持原状不变，我希望看到变形元素的一半隐藏在未触动的元素后面，而另一边则隐藏在外面。

HTML：

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

CSS：

.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
}

http://jsfiddle.net/jaredkhan/4VRTb/3/ 小提琴使用相同的代码。

变换元素的底部不显示在未触及的元素前面，尽管理论上在3D空间中更接近。然而，这确实像我在Safari中所期望的那样工作。我错过了什么吗？我已经尝试将它们明确地放在同一个z-index上，甚至嵌套内部的一个，似乎没有什么工作。我可能只是愚蠢但请求帮助。

由于

Answer 1

将子项一一渲染到父元素的平面上。您需要在父级上设置connect来防止这种情况（fiddle）：

transform-style: preserve-3d

有关MDN的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

（我不确定这是否早在2014年问您问题时就已经存在，但现在在2019年仍然有效。）

控制CSS三维变换元素的交集

1 个答案: