css - 控制 CSS 3D 转换元素的交集

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/ fiddle 使用相同的代码。

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

谢谢

Answer 1

子元素被一个一个渲染到父元素的平面上。您需要在父级上设置 transform-style: preserve-3d 以防止这种情况 (fiddle):

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

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

(我不确定这在 2014 年你问这个问题时是否存在，但它现在在 2019 年有效。)