html, body {
    margin: 0 auto;
    background-color: #FFF;
}
.cube-rotation {
    width: 300px;
    height: 250px;
    position: absolute;
    -webkit-transform: perspective(1050px) translateZ(-150px);
    -ms-transform: perspective(1050px) translateZ(-150px);
    transform: perspective(1050px) translateZ(-150px);
}
.cube-rotation a {
    backface-visibility: hidden;
    border: medium none;
    width: 300px;
    height: 250px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: inherit;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center center;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: cover;
}
.cube-rotation a:nth-child(1) {
    z-index: 100;
    transform: perspective(1200px) rotateY(360deg) translateZ(150px);
    -webkit-transform: perspective(1200px) rotateY(360deg) translateZ(150px);
    -ms-transform: perspective(1200px) rotateY(360deg) translateZ(150px);
    -webkit-animation: side1_rotate 10s ease-in-out infinite;
    animation: side1_rotate 20s ease-in-out infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.cube-rotation a:nth-child(2) {
    transform: perspective(1200px) rotateY(270deg) translateZ(150px);
    -webkit-transform: perspective(1200px) rotateY(270deg) translateZ(150px);
    -ms-transform: perspective(1200px) rotateY(270deg) translateZ(150px);
    -webkit-animation: side2_rotate 10s ease-in-out infinite;
    animation: side2_rotate 20s ease-in-out infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.cube-rotation a:nth-child(3) {
    transform: perspective(1200px) rotateY(180deg) translateZ(150px);
    -webkit-transform: perspective(1200px) rotateY(180deg) translateZ(150px);
    -ms-transform: perspective(1200px) rotateY(180deg) translateZ(150px);
    -webkit-animation: side3_rotate 10s ease-in-out infinite;
    animation: side3_rotate 20s ease-in-out infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.cube-rotation a:nth-child(4) {
    transform: perspective(1200px) rotateY(90deg) translateZ(150px);
    -webkit-transform: perspective(1200px) rotateY(90deg) translateZ(150px);
    -ms-transform: perspective(1200px) rotateY(90deg) translateZ(150px);
    -webkit-animation: side4_rotate 10s ease-in-out infinite;
    animation: side4_rotate 20s ease-in-out infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
@-webkit-keyframes side1_rotate {
    0% {
         -webkit-transform: perspective(1200px) rotateY(-0deg) translateZ(150px)
    }
    10% {
        -webkit-transform: perspective(1200px) rotateY(-90deg) translateZ(150px)
    }
    25% {
         -webkit-transform: perspective(1200px) rotateY(-90deg) translateZ(150px)
    }
    35% {
        -webkit-transform: perspective(1200px) rotateY(-180deg) translateZ(150px)
    }
    50% {
        -webkit-transform: perspective(1200px) rotateY(-180deg) translateZ(150px)
    }
    60% {
        -webkit-transform: perspective(1200px) rotateY(-270deg) translateZ(150px)
    }
    75% {
        -webkit-transform: perspective(1200px) rotateY(-270deg) translateZ(150px)
    }
    85% {
        -webkit-transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
    100% {
        -webkit-transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
}
@keyframes side1_rotate {
    0% {
         -ms-transform: perspective(1200px) rotateY(-0deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-0deg) translateZ(150px);
    }
    10% {
        -ms-transform: perspective(1200px) rotateY(-90deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-90deg) translateZ(150px)
    }
    25% {
         -ms-transform: perspective(1200px) rotateY(-90deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-90deg) translateZ(150px);
    }
    35% {
        -ms-transform: perspective(1200px) rotateY(-180deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-180deg) translateZ(150px)
    }
    50% {
        -ms-transform: perspective(1200px) rotateY(-180deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-180deg) translateZ(150px);
    }
    60% {
        -ms-transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
    }
    75% {
        -ms-transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
    }
    85% {
        -ms-transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
    }
    100% {
        -ms-transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
    }
}
@-webkit-keyframes side2_rotate {
    0% {
        -webkit-transform: perspective(1200px) rotateY(-270deg) translateZ(150px)
    }
    10% {
        -webkit-transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
    25% {
        -webkit-transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
    35% {
        -webkit-transform: perspective(1200px) rotateY(-450deg) translateZ(150px)
    }
    50% {
        -webkit-transform: perspective(1200px) rotateY(-450deg) translateZ(150px)
    }
    60% {
        -webkit-transform: perspective(1200px) rotateY(-540deg) translateZ(150px)
    }
    75% {
        -webkit-transform: perspective(1200px) rotateY(-540deg) translateZ(150px)
    }
    85% {
        -webkit-transform: perspective(1200px) rotateY(-630deg) translateZ(150px)
    }
    100% {
        -webkit-transform: perspective(1200px) rotateY(-630deg) translateZ(150px)
    }
}
@keyframes side2_rotate {
    0% {
        -ms-transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
    }
    10% {
        -ms-transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
    25% {
        -ms-transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
    }
    35% {
        -ms-transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-450deg) translateZ(150px)
    }
    50% {
        -ms-transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
    }
    60% {
        -ms-transform: perspective(1200px) rotateY(-540deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-540deg) translateZ(150px);
    }
    75% {
        -ms-transform: perspective(1200px) rotateY(-540deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-540deg) translateZ(150px);
    }
    85% {
        -ms-transform: perspective(1200px) rotateY(-630deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-630deg) translateZ(150px);
    }
    100% {
        -ms-transform: perspective(1200px) rotateY(-630deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-630deg) translateZ(150px);
    }
}
@-webkit-keyframes side3_rotate {
    0% {
        -webkit-transform: perspective(1200px) rotateY(-180deg) translateZ(150px)
    }
    10% {
        -webkit-transform: perspective(1200px) rotateY(-270deg) translateZ(150px)
    }
    25% {
        -webkit-transform: perspective(1200px) rotateY(-270deg) translateZ(150px)
    }
    35% {
        -webkit-transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
    50% {
        -webkit-transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
    60% {
        -webkit-transform: perspective(1200px) rotateY(-450deg) translateZ(150px)
    }
    75% {
        -webkit-transform: perspective(1200px) rotateY(-450deg) translateZ(150px)
    }
    85% {
        -webkit-transform: perspective(1200px) rotateY(-540deg) translateZ(150px)
    }
    100% {
        -webkit-transform: perspective(1200px) rotateY(-540deg) translateZ(150px)
    }
}
@keyframes side3_rotate {
    0% {
        -ms-transform: perspective(1200px) rotateY(-180deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-180deg) translateZ(150px);
    }
    10% {
        -ms-transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-270deg) translateZ(150px)
    }
    25% {
        -ms-transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
    }
    35% {
        -ms-transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
    50% {
        -ms-transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
    }
    60% {
        -ms-transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
    }
    75% {
        -ms-transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
    }
    85% {
        -ms-transform: perspective(1200px) rotateY(-540deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-540deg) translateZ(150px);
    }
    100% {
        -ms-transform: perspective(1200px) rotateY(-540deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-540deg) translateZ(150px);
    }
}
@-webkit-keyframes side4_rotate {
    0% {
        -webkit-transform: perspective(1200px) rotateY(-90deg) translateZ(150px)
    }
    10% {
        -webkit-transform: perspective(1200px) rotateY(-180deg) translateZ(150px)
    }
    25% {
        -webkit-transform: perspective(1200px) rotateY(-180deg) translateZ(150px)
    }
    35% {
        -webkit-transform: perspective(1200px) rotateY(-270deg) translateZ(150px)
    }
    50% {
        -webkit-transform: perspective(1200px) rotateY(-270deg) translateZ(150px)
    }
    60% {
        -webkit-transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
    75% {
        -webkit-transform: perspective(1200px) rotateY(-360deg) translateZ(150px)
    }
    85% {
        -webkit-transform: perspective(1200px) rotateY(-450deg) translateZ(150px)
    }
    100% {
        -webkit-transform: perspective(1200px) rotateY(-450deg) translateZ(150px)
    }
}
@keyframes side4_rotate {
    0% {
        -ms-transform: perspective(1200px) rotateY(-90deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-90deg) translateZ(150px);
    }
    10% {
        -ms-transform: perspective(1200px) rotateY(-180deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-180deg) translateZ(150px)
    }
    25% {
        -ms-transform: perspective(1200px) rotateY(-180deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-180deg) translateZ(150px);
    }
    35% {
        -ms-transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-270deg) translateZ(150px)
    }
    50% {
        -ms-transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-270deg) translateZ(150px);
    }
    60% {
        -ms-transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
    }
    75% {
        -ms-transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-360deg) translateZ(150px);
    }
    85% {
        -ms-transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
    }
    100% {
        -ms-transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
        transform: perspective(1200px) rotateY(-450deg) translateZ(150px);
    }
}