css - 回転時の CSS 3D キューブの Z-Index の問題

Question

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

ありがとう～！