#mainDiv {
    width: 400px;
    height: 223px;
    margin: 43px auto;
    perspective: 800px;
}
@media only screen and (max-width: 500px){ 
#mainDiv {
    width: 114px;
    height: 223px;
    margin: 0px auto;
    perspective: 800px;
}}
#boxDiv {
    width:400px;
    transform-style: preserve-3d;
    animation: rotate 15s linear infinite;
}
#boxDiv div {
    width:400px;
    height:213px;
    position:absolute;
    color:#222;
    text-align:center;
}
#front {
    transform:translateZ(200px);
    background: #fff;
}
#back {
    transform:rotateY(180deg) translateZ(200px);
    background:#fff;
}
#left {
    transform:rotateY(-90deg) translateX(-200px);
    transform-origin:left;
    background: #fff;
}
#right {
    transform:rotateY(90deg) translateX(200px);
    transform-origin:right;
    background:#fff;
}
#top {
    transform:rotateX(-90deg) translateY(-200px);
    transform-origin:top;
    background:#101010;
}
#bottom {
    transform:rotaceX(90deg) translateY(200px);
    transform-origin:bottom;
    background:#101010;
}

@keyframes rotate 
{
    0% { transform: rotateY(0);}
    100% { transform: rotateY(360deg);}
}