.container {
            -webkit-perspective: 600;
            -moz-perspective: 600;
            margin-top: 100px;
            }
        
            #cube {
            width: 200px;
            height: 200px;
            margin: 0 auto 40px;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: translateZ(-100px) rotateX(-220deg) rotateY(45deg);
            -moz-transform-style: preserve-3d;
            -moz-transform: translateZ(-100px) rotateX(-220deg) rotateY(45deg);
            }
        
            #cube div {
                -webkit-transition: -webkit-transform 1s;
                -moz-transition: -moz-transform 1s;
                position: absolute;
                -webkit-backface-visibility: visible;
                -moz-backface-visibility: visible;
                overflow: hidden;
                width: 200px;
                height: 200px;
            }
            
            #front {
                -webkit-transform: translateZ(100px);
                -moz-transform: translateZ(100px);
            }
            
            #back {
                -webkit-transform: translateZ(-100px);
                -moz-transform: translateZ(-100px);
            }
            
            #left {
                -webkit-transform: rotateY(90deg) translateZ(100px);
                -moz-transform: rotateY(90deg) translateZ(100px);
            }
            
            #right {
                -webkit-transform: rotateY(-90deg) translateZ(100px);
                -moz-transform: rotateY(-90deg) translateZ(100px);
            }
            
            #up {
                -webkit-transform: rotateX(90deg) translateZ(100px);	
                -moz-transform: rotateX(90deg) translateZ(100px);
            }
            
            #bottom {
                -webkit-transform: rotateX(-90deg) translateZ(100px);	
                -moz-transform: rotateX(-90deg) translateZ(100px);
            }
            
            #cube.rotation {
                -webkit-animation: rotateCube 8s infinite ease-in-out;
                -moz-animation: rotateCube 8s infinite ease-in-out;
            }
            
            @-webkit-keyframes rotateCube {
                0% {
                    -webkit-transform: translateZ(-100px) rotateX(0deg) rotateY(0deg);
                }
                100% {
                    -webkit-transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);
                }
            }
            
            @-moz-keyframes rotateCube {
                0% {
                    -moz-transform: translateZ(-100px) rotateX(0deg) rotateY(0deg);
                }
                100% {
                    -moz-transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);
                }
            }
            
            #cube:hover #front {
                -webkit-transform: translateZ(300px);
                -moz-transform: translateZ(300px);
            }
            
            #cube:hover #back {
                -webkit-transform: translateZ(-300px);
                -moz-transform: translateZ(-300px);
            }
            
            #cube:hover #left {
                -webkit-transform: rotateY(90deg) translateZ(200px);
                -moz-transform: rotateY(90deg) translateZ(200px);
            }
            
            #cube:hover #right {
                -webkit-transform: rotateY(-90deg) translateZ(200px);
                -moz-transform: rotateY(-90deg) translateZ(200px);
            }
            
            #cube:hover #up {
                -webkit-transform: rotateX(90deg) translateZ(200px);
                -moz-transform: rotateX(90deg) translateZ(200px);
            }
            
            #cube:hover #bottom {
                -webkit-transform: rotateX(-90deg) translateZ(200px);
                -moz-transform: rotateX(-90deg) translateZ(200px);
            }