.wrapper {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  overflow:hidden;
  height:100%;
  perspective: 970px;
  perspective-origin: center 40%;
  z-index: -999;
  }

#controls{
position:absolute;
	width:100%;
	top:0px;
	left: 0px;
	height:100%;
	z-index:-999;
	}  
.side{
  
  cursor: pointer;
  }
#cube{
	-webkit-animation: rotate 20s infinite linear;
	-moz-animation: rotate 20s infinite linear;
	-o-animation: rotate 20s infinite linear;
    animation: rotate 20s infinite linear;
}
  
.container {	
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

  vertical-align: middle;
  margin: auto; 
  -webkit-transition:transform;
  -moz-transition: transform;
  -o-transition: transform;
  transition: transform; 
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index:-9999;
  width: 970px;
  height: 160px; 
  }
  .container:before,
  .container:after {
    content: "";
    display: block;
    position: absolute;
    width: 300px;
    height: 300px;
    }
    .container:before {
	  -moz-transform: rotateX(90deg);  /* Для Firefox */
      -ms-transform: rotateX(90deg);   /* Для IE */
      -webkit-transform: rotateX(90deg);   /* Для Safari, Chrome, iOS */
      -o-transform: rotateX(90deg);  /* Для Opera */
      transform: rotateX(90deg);  
      }
    .container:after {
		-moz-transform: rotateY(90deg);  /* Для Firefox */
      -ms-transform: rotateY(90deg);   /* Для IE */
      -webkit-transform: rotateY(90deg);   /* Для Safari, Chrome, iOS */
      -o-transform: rotateY(90deg);  /* Для Opera */
      transform: rotateY(90deg);  
      }

.side {
  position: absolute;
  border: 1px solid grey;
  opacity: 1;
  z-index:10;
  background-color:white;
  }

.back {
	width: 970px;
  height: 160px; 
  -moz-transform: translateZ(-80px) translateX(-0px) translateY(-0px) rotateY(180deg) rotateZ(180deg);
      -ms-transform: translateZ(-80px) translateX(-0px) translateY(-0px) rotateY(180deg) rotateZ(180deg);
      -webkit-transform: translateZ(-80px) translateX(-0px) translateY(-0px) rotateY(180deg) rotateZ(180deg);
      -o-transform: translateZ(-80px) translateX(-0px) translateY(-0px) rotateY(180deg) rotateZ(180deg);
  transform: translateZ(-80px) translateX(-0px) translateY(-0px) rotateY(180deg) rotateZ(180deg);
  }
.left {
	background-image:url(Left_Right.png);
	width: 160px;
  height: 160px; 
  -moz-transform: translateX(-80px) translateY(-0px) rotateY(-90deg);
      -ms-transform: translateX(-80px) translateY(-0px) rotateY(-90deg);
      -webkit-transform: translateX(-80px) translateY(-0px) rotateY(-90deg);
      -o-transform: translateX(-80px) translateY(-0px) rotateY(-90deg);
  transform: translateX(-80px) translateY(-0px) rotateY(-90deg);
  }
.right {
	background-image:url(Left_Right.png);
	width: 160px;
  height: 160px; 
   -moz-transform: translateX(890px) translateY(-0px) rotateY(90deg);
      -ms-transform: translateX(890px) translateY(-0px) rotateY(90deg);
      -webkit-transform: translateX(890px) translateY(-0px) rotateY(90deg);
      -o-transform: translateX(890px) translateY(-0px) rotateY(90deg);
  transform: translateX(890px) translateY(-0px) rotateY(90deg);
  }
.top {
	width: 970px;
  height: 160px; 
  -moz-transform: translateY(-80px) translateX(-0px) rotateX(90deg);
      -ms-transform: translateY(-80px) translateX(-0px) rotateX(90deg);
      -webkit-transform: translateY(-80px) translateX(-0px) rotateX(90deg);
      -o-transform: translateY(-80px) translateX(-0px) rotateX(90deg);
  transform: translateY(-80px) translateX(-0px) rotateX(90deg);
  }
.bottom {
	width: 970px;
  height: 160px; 
    -moz-transform:  translateY(80px) translateX(-0px) rotateX(-90deg);
      -ms-transform: translateY(80px) translateX(-0px) rotateX(-90deg);
      -webkit-transform: translateY(80px) translateX(-0px) rotateX(-90deg);
      -o-transform:  translateY(80px) translateX(-0px) rotateX(-90deg);
  transform: translateY(80px) translateX(-0px) rotateX(-90deg);
  }
.front {
	width: 970px;
  height: 160px; 
      -moz-transform: translateZ(80px) translateX(-0px) translateY(-0px);
      -ms-transform: translateZ(80px) translateX(-0px) translateY(-0px);
      -webkit-transform: translateZ(80px) translateX(-0px) translateY(-0px);
      -o-transform:  translateZ(80px) translateX(-0px) translateY(-0px);
  transform: translateZ(80px) translateX(-0px) translateY(-0px);
  opacity: 1;
  }
  
 #front{
	 width:970px;
	 height:160px;
	 background-color:green;
 } 
 #back{
	 width:970px;
	 height:160px;
	 background-color:red;
 } 
 #top{
	 width:970px;
	 height:160px;
	 background-color:yellow;
 } 
 #bottom{
	 width:970px;
	 height:160px;
	 background-color:grey;
 } 
  
  
@-webkit-keyframes rotate {
	0% {
    -webkit-transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(-360deg);
  }
}  
  
@-moz-keyframes rotate {
	0% {
    -moz-transform: rotateX(0deg);
  }
  100% {
    -moz-transform: rotateX(-360deg);
  }  
}
  
@-o-keyframes rotate {
	0% {
    -o-transform: rotateX(0deg);
  } 
  100% {
    -o-transform: rotateX(-360deg);
  } 
}
  
@keyframes rotate {
	0% {
    transform: rotateX(0deg);
  }
	
  100% {
    transform: rotateX(-360deg);
  }
  

}