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

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

见plunker

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

Answer 1

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

transform-style 是个例外

设置

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

或

.bottom {
    transform-style: inherit;
}

会解决问题

demo

父子 div 的 3d 变换

3d transform for a parent-child divs

css

css-transforms