css代码如下：

html,body,div{
    margin:0;
    padding:0;
}
.wrap{
    width:200px;
    height:200px;
    margin:600px auto 0 auto;
    perspective:500px;
    -webkit-perspective:500px;
    perspective-origin:50% 50%;
    -webkit-perspective-origin:50% 50%;
}

.box{
    position:relative;
    width:200px;
    height:200px;
    transform:rotateX(0deg)translateZ(400px);
    -webkit-transform:rotateX(0deg)translateZ(400px);
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
}
.box div{
    position:absolute;
    width:200px;
    height:200px;
    line-height:200px;
    text-align:center;
    border:1px solid black;
}


.zq{
    transform:translateZ(-100px)rotateY(180deg);
    -webkit-transform:translateZ(-100px)rotateY(180deg);
}
.xw{
    transform:translateZ(100px);
    -webkit-transform:translateZ(100px);
}
.ql{
    transform:rotateY(-90deg)translateZ(100px);
    -webkit-transform:rotateY(-90deg)translateZ(100px);
}
.bh{
    transform:rotateY(90deg)translateZ(100px);
    -webkit-transform:rotateY(90deg)translateZ(100px);
}
.yql{
    transform:rotateX(90deg)translateZ(100px);
    -webkit-transform:rotateX(90deg)translateZ(100px);
}
.ts{
    transform:rotateX(-90deg)translateZ(100px);
    -webkit-transform:rotateX(-90deg)translateZ(100px);
}

@keyframes spin{
    from{transform:translateZ(400px)rotateY(0deg);}
    to{transform:translateZ(400px)rotateY(360deg);}
}
@-webkit-keyframes spin{
    from{-webkit-transform:translateZ(400px)rotateY(0deg);}
    to{-webkit-transform:translateZ(400px)rotateY(360deg);}
}

.box{
    animation:spin 5s infinite linear;
    -webkit-animation:spin 5s infinite linear;
}

预览图大致如下：

请问怎么解决这个问题啊？