body {
    background: #fff;
    margin: 0;
}
h1 {
    text-align: center;
    color: white;
    line-height: 220px;
    font-size: 8em
}
#mainDiv {
    width: 400px;
    height: 400px;
    margin: 200px auto;
    perspective: 1000px;
}
#boxDiv {
    width: 400px;
    transform-style: preserve-3d;
    animation: rotate 15s linear infinite;
}
#boxDiv div{
    position: absolute;
    width: 400px;
    height: 400px;
/*    border: 5px solid #4a4a4a;*/
}
#front {
    transform: translateZ(200px);
    background: #3498db;
}
#back {
    transform: rotateY(180deg) translateZ(200px);
    background: #2ecc71;
}
#left {
    transform: rotateY(-90deg) translateX(-200px);
    transform-origin: left;
    background: #e74c3c;
}
#right {
    transform: rotateY(90deg) translateX(200px);
    transform-origin: right;
    background: #8e44ad;
}
#top {
    transform: rotateX(-90deg) translateY(-200px);
    transform-origin: top;
    background: #34495e;
}
#bottom {
    transform: rotateX(90deg) translateY(200px);
    transform-origin: bottom;
    background: #ecf0f1;
}

@keyframes rotate {
    0% {
        transform:;
    }
    50% {
        transform: rotateX(360deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-  back style  =-=-=-=-=-=-=-=-=-=- */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
.back_page_648 {width: 65px;height: 30px;background: rgba(0, 152, 255, 0.87);-webkit-box-shadow: 0px 1px 3px rgba(0, 152, 255, 0.63);-moz-box-shadow: 0px 1px 3px rgba(0, 152, 255, 0.63);box-shadow: 0px 1px 3px rgba(0, 152, 255, 0.63);display: block;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;color: white;text-align: center;line-height: 33px;font-size: 1.5em;position: absolute;top: 3%;left: 3%;
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */