1

我使用 CSS 和<div>s 创建了一个基本的 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);
    }
}

谢谢~！

4

1 回答 1

2

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

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

更新了 jsFiddle

于 2013-06-14T04:42:54.990 回答