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变换

1 个答案: