.cube-container {
  width: 300px;
  height: 300px;
  position: relative;
  margin: auto;
  top: 60px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-animation: rotatecube 15s infinite;
  
  -moz-transform-style: preserve-3d;
  -moz-animation: rotatecube 15s infinite;
}

#cube div {
  width: 300px;
  height: 300px;
  display: block;
  position: absolute;
  border: none;
  line-height: 300px;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
}

@-webkit-keyframes rotatecube {

/*  0% { -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }
  20% { -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg); }
  40% { -webkit-transform: rotateX(180deg) rotateY(90deg) rotateZ(270deg); }
  60% { -webkit-transform: rotateX(270deg) rotateY(180deg) rotateZ(360deg); }
  80% { -webkit-transform: rotateX(360deg) rotateY(270deg) rotateZ(0deg); }
  90% { -webkit-transform: rotateX(-90deg) rotateY(-270deg) rotateZ(0deg); }
  100% { -webkit-transform: rotateX(-180deg) rotateY(-360deg) rotateZ(-90deg); }*/

0% { -webkit-transform: rotateX(0deg) rotateY(270deg) rotateZ(90deg); }
  30% { -webkit-transform: rotateX(180deg) rotateY(360deg) rotateZ(0deg); }
  15% { -webkit-transform: rotateX(270deg) rotateY(540deg) rotateZ(180deg); }
  45% { -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg); }
  60% { -webkit-transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg); }
  75% { -webkit-transform: rotateX(270deg) rotateY(360deg) rotateZ(0deg); }
  
}

@-moz-keyframes rotatecube {
 /* 0% { -moz-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }
  25% { -moz-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }
  50% { -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
  75% { -moz-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }
  100% { -moz-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }*/
0% { -webkit-transform: rotateX(0deg) rotateY(270deg) rotateZ(90deg); }
  30% { -webkit-transform: rotateX(180deg) rotateY(360deg) rotateZ(0deg); }
  15% { -webkit-transform: rotateX(270deg) rotateY(540deg) rotateZ(180deg); }
  45% { -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg); }
  60% { -webkit-transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg); }
  75% { -webkit-transform: rotateX(270deg) rotateY(360deg) rotateZ(0deg); }
}

.front {
  background: rgba(255,0,0,.5);
}

.back {
  background: rgba(0,255,0,.5);
}

.right {
  background: rgba(0,0,255,.5);
}

.left {
  background: rgba(0,255,255,.5);
}

.top {
  background: rgba(255,0,255,.5);
}

.bottom {
  background: rgba(255,255,0,.5);
}

#cube .front  {
  -webkit-transform: rotateY(0deg ) translateZ( 150px );
  -moz-transform: rotateY( 0deg ) translateZ( 150px );
}
#cube .back {
  -webkit-transform: rotateX( 180deg ) translateZ( 150px );
  -moz-transform: rotateX( 180deg ) translateZ( 150px );
}
#cube .right  {
  -webkit-transform: rotateY(  90deg ) translateZ( 150px );
  -moz-transform: rotateY(  90deg ) translateZ( 150px );
}
#cube .left   {
  -webkit-transform: rotateY( -90deg ) translateZ( 150px );
  -moz-transform: rotateY( -90deg ) translateZ( 150px );
}
#cube .top    {
  -webkit-transform: rotateX(  90deg ) translateZ( 150px );
  -moz-transform: rotateX(  90deg ) translateZ( 150px );
}
#cube .bottom {
  -webkit-transform: rotateX( -90deg ) translateZ( 150px );
  -moz-transform: rotateX( -90deg ) translateZ( 150px );
}

/*Mine*/
.cube-img{
  width: 180px;
}
.cube-txt{
  font-size: 15px;
}