.wrap {
    /*perspective:1000px;
    perspective-origin: 50% 50%;*/ /*扁平化旋轉*/
}
.cube {
    position: relative;
    left:500px;top:100px;
    width: 200px;
    height:200px;
    transform-style: preserve-3d;
}
.cube div {
    border:1px solid #999;
    position: absolute;
    width: 200px;
    height: 200px;
}
.back {

    transform: translateZ(-100px) rotateY(180deg);
}
.right {

    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}
.left {

    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}
.top {

    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
}
.bottom {

    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
}
.front {

    transform: translateZ(100px);
}
@-webkit-keyframes spin {
    form { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}
 
.cube {
    -webkit-animation: spin 5s  linear infinite;
    /*-webkit-animation-fill-mode:forwards;*/  /*迴圈一次*/
}
 

直接copy，就可以預覽效果！