#mainDiv {
  width: 200px;
  height: 100%;
  margin: 0px auto;
  perspective: 600px;
}

#boxDiv {
  width: 200px;   
  transform-style: preserve-3d; 
  animation: rotate 15s linear infinite;
}

#boxDiv div {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  color: white;
}

#front {
  transform: translateZ(100px);
  background: transparent;
  background-image:  url("../img/logo/cube1.png");
  background-position: center;
  background-repeat: no-repeat;

}


#back {
  transform: rotateY(180deg) translateZ(100px);
  background: #101010;
  background-position: center;
  background-repeat: no-repeat;    
}

#left {
  transform: rotateY(-90deg) translateX(-100px);
  transform-origin: left;
  background: transparent;
  background-image:  url("../img/logo/cube2.png");
  background-position: center;
  background-repeat: no-repeat;    
}

#right {
  transform: rotateY(90deg) translateX(100px);
  transform-origin: right;
  background: transparent;
  background-image:  url("../img/logo/cube3.png");
  background-position: center;
  background-repeat: no-repeat;    
}

#top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top;
  background: #101010;
  background-position: center;
  background-repeat: no-repeat;    
}

#bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom;
  background: #101010; 
  background-position: center;
  background-repeat: no-repeat;    
}

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


.shadow {
  
  
  width:200px;
  height:200px;
  background: rgba(0,0,0,0.5);
  box-shadow: 0 0 50px 50px rgba(0,0,0,0.5);
  -webkit-transform: rotateX(90deg) translateZ(-150px) rotateY(180deg) translateX(0px);

}