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

应用backface-visibility: hidden隐藏已旋转的元素部分以显示背面：

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

Updated jsFiddle

旋转时CSS 3D立方体Z-Index问题

1 个答案: