旋转时 CSS 3D 立方体 Z 索引问题

Question

我使用 CSS 和 <div> 创建了一个基本的 3D 立方体秒。但是，当它设置动画时，两侧并没有正确地“重叠”。这有点难以解释，所以请参阅 http://jsfiddle.net/JNCNr/明白我的意思。我已经阅读了一些 SO 帖子、MDN 等等，但我不太确定是什么导致了我的问题。我只是希望两侧在彼此后面旋转时能够正常运行。

编辑:目前它仅适用于 Chrome。

这是我的一些 CSS:

.container {
    position: absolute;

    left: 50%;
    top: 50%;

    height: 100px;
    width: 100px;

    /* for 3d animations */
    -webkit-perspective: 800;
}

.box {
    /* size */
    height: 100px;
    width: 100px;
    position: absolute;
    -webkit-user-select: none;
    cursor: move;
    /* color */
    opacity: 1;
    background: -webkit-radial-gradient(#666, #333);
    border: 1px solid black;
    /* 3d stuff */
    -webkit-transform-origin: 50px 50px -50px;
}

.s1 {
    -webkit-animation: as1 4s linear infinite;
}
@-webkit-keyframes as1 {
    from {
        -webkit-transform: rotate3d(0, -1, 0, -270deg);
    }
    to {
        -webkit-transform: rotate3d(0, -1, 0, 90deg);
    }
}

谢谢~!

Answer 1

申请<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility" rel="noreferrer noopener nofollow">backface-visibility</a>: hidden隐藏已旋转以显示背面的元素部分:

.s1, .s2, .s3, .s4 {
    -webkit-backface-visibility: hidden;
}

Updated jsFiddle