.scene3d {
          
            margin-top: 200px;
            }
        
 #cube {
            width: 200px;
            height: 200px;
            margin: 0 auto 40px;
            -moz-transform-style: preserve-3d;
            -moz-transform:  rotateX(-20deg) rotateY(30deg);
            -moz-animation: maRotation 8s infinite ease-in-out;

             -webkit-transform-style: preserve-3d;
            -webkit-transform:  rotateX(-20deg) rotateY(30deg);
            -webkit-animation: maRotation 8s infinite ease-in-out;
              
              
            
            }



@-moz-keyframes maRotation {
                0% {
                    -moz-transform: rotateX(20deg) rotateY(10deg);
                }
                100% {
                    -moz-transform:   rotateX(380deg) rotateY(370deg);                }
            }

@-webkit-keyframes maRotation {
                0% {
                    -webkit-transform: rotateX(20deg) rotateY(10deg);
                }
                100% {
                    -webkit-transform:   rotateX(380deg) rotateY(370deg);
                }
            }

#cube div {
                position: absolute;
                width: 200px;
                height: 200px;
               -moz-transition: -moz-transform ls;
               -webkit-transition: -webkit-transform ls;
  
            }

#cube:hover #f1 {
               
                -moz-transform: rotateY(180deg) translateZ(200px);
                -webkit-transform: rotateY(180deg) translateZ(200px);
            }

#cube:hover #f2 {
               
                -moz-transform: rotateY(-90deg) translateZ(200px);
                -webkit-transform: rotateY(-90deg) translateZ(200px);
            }


#cube:hover #f3 {
               
                -moz-transform: rotateY(90deg) translateZ(200px);
                -webkit-transform: rotateY(90deg) translateZ(200px);
            }
        
#cube:hover #f4 {
               
                -moz-transform: rotateY(0deg) translateZ(200px);
                -webkit-transform: rotateY(0deg) translateZ(200px);
            }

#cube:hover #f5 {
               
      -moz-transform: rotateX(-90deg) rotateY(-180deg) translateZ(200px);
      -webkit-transform: rotateX(-90deg) rotateY(-180deg) translateZ(200px);
            }

#cube:hover #f6 {
               
        -moz-transform: rotateX(-90deg) translateZ(200px);
      -webkit-transform: rotateX(-90deg) translateZ(200px);
            }       
       


 
#f1 {
       -moz-transform: rotateY(180deg) translateZ(100px);
       -webkit-transform: rotateY(180deg) translateZ(100px);

       -moz-transition: all 1s;
       -webkit-transition: all 1s;
      }
            
#f2 {
         -moz-transform: rotateY(-90deg) translateZ(100px);
         -webkit-transform: rotateY(-90deg) translateZ(100px);

         -moz-transition: all 1s;
       -webkit-transition: all 1s;
       }

#f3 {
      -moz-transform: rotateY(90deg) translateZ(100px);
      -webkit-transform: rotateY(90deg) translateZ(100px);

      -moz-transition: all 1s;
       -webkit-transition: all 1s;

       }
            
#f4{
     -moz-transform: rotateY(0deg) translateZ(100px);
      -webkit-transform: rotateY(0deg) translateZ(100px);

      -moz-transition: all 1s;
       -webkit-transition: all 1s;
}

#f5{
     -moz-transform: rotateX(-90deg) rotateY(-180deg) translateZ(100px);
      -webkit-transform: rotateX(-90deg) rotateY(-180deg) translateZ(100px);

      -moz-transition: all 1s;
       -webkit-transition: all 1s;

}

#f6{
      -moz-transform: rotateX(-90deg) translateZ(100px);
      -webkit-transform: rotateX(-90deg) translateZ(100px);

      -moz-transition: all 1s;
       -webkit-transition: all 1s;
}