css - 父子 div 的 3d 变换

Question

为什么要使用以下 HTML:

<div class="container">
    <div class="bottom">
        <div class="face"></div>
    </div>
</div>

和 CSS:

.container {
    width: 300px;
    height: 300px;
    position: relative;
    transform: perspective(900px);
    transform-style: preserve-3d;
    animation: rot 8s infinite linear;
}
.bottom {
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    top: 15%;
    left: 15%;
    opacity: 1;
}
.face {
    width: 100px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 0px;
    top: 0px;
    transform-origin: 0% 0%;
    transform: rotateY(60deg);
}

蓝色方 block 在返回时没有覆盖红色矩形(backface-visibility 没有帮助)？同时，当 .bottom 和 .face 不在父子关系中时，一切都按预期进行。

参见 plunker

注意:适用于 Chrome。在 Firefox 中，第一个示例不起作用。在 IE 中。

Answer 1

大多数 CSS 属性都是继承的。

transform-style 是个异常(exception)

设置

.bottom {
    transform-style: preserve-3d;
}

或

.bottom {
    transform-style: inherit;
}

会解决问题

demo