父子div的三维变换

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);
}

蓝色正方形在返回时不会覆盖红色矩形（backface-visibility没有帮助）？在.bottom和.face不处于父子关系的同时，一切都如预期的那样工作。

参见plunker

注意：适用于Chrome。在Firefox中，第一个例子不起作用。在IE中，他们两个。

Answer 1

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

转换样式是的一个例外

设置

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

或

.bottom {
    transform-style: inherit;
}

将解决问题

演示