.stage {
  width:450px;
  height: 140px;
  
  position: relative;
  top:-130px;
  perspective: 1600px;
  perspective-origin: 36.5% -340px;
  float:right;
  
 
  
}

.cube {
  transform-style: preserve-3d;
  transform-origin: 100px 50%;
  position: absolute;
  top: -120px;
  left: 14px;
}
.cube span {
  color: white;
  display: block;
  font-size: 50px;
  height: 200px;
  line-height: 200px;
  opacity: 0.5;
  position: absolute;
  text-align: center;
  width: 200px;
}
.back {
  background-color: #f00;
  transform: rotateY(180deg) translateZ(100px);
}
.top {
  background-color: #ff7400;
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  background-color: #aaa;
  box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
  transform: rotateX(-90deg) translateZ(100px);
}
.left {
  background-color: #099;
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  background-color: #0c0;
  transform: rotateY(90deg) translateZ(100px);
}
.front {
  background-color: #ff0;
  transform: translateZ(100px);
}



.container_cube{
  margin: 0 auto;
  width: 250px;
  float:right;
  border: 1px solid #ccc;
}

.left, .right {
  height: 100%;
  overflow: hidden;
  width:50%;
}

.left {
  float: left;
}

.right {
  float: right;
}


@-moz-keyframes rotate
	{
		0%{ -moz-transform:rotateY(0);transform:rotateY(0)}
		100%{ -moz-transform:rotateY(-360deg);transform:rotateY(-360deg)}
	}
@-webkit-keyframes rotate 
	{
		0%{-webkit-transform:rotateY(0);transform:rotateY(0)}
		100%{-webkit-transform:rotateY(-360deg);transform:rotateY(-360deg)}
	}
@keyframes rotate{
		0%{-moz-transform:rotateY(0);-ms-transform:rotateY(0);-o-transform:rotateY(0);-webkit-transform:rotateY(0);transform:rotateY(0)}
		100%{-moz-transform:rotateY(-360deg);-ms-transform:rotateY(-360deg);-o-transform:rotateY(-360deg);-webkit-transform:rotateY(-360deg);transform:rotateY(-360deg)}
		}
@-moz-keyframes introduceCube{
	0%{opacity:0;top:-20px;-moz-transform:scale(.6);transform:scale(.6)}
	20%{opacity:1}100%{top:0;-moz-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes introduceCube
	{
		0%{opacity:0;top:-20px;-webkit-transform:scale(.6);transform:scale(.6)}
		20%{opacity:1}100%{top:0;-webkit-transform:scale(1);transform:scale(1)}
	}
@keyframes introduceCube
	{
	0%{opacity:0;top:-20px;-moz-transform:scale(.6);-ms-transform:scale(.6);-o-transform:scale(.6);-webkit-transform:scale(.6);transform:scale(.6)}
	20%{opacity:1}100%{top:0;-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
	}
	
	
.stage .cube
	{
		

		
		
		
		-moz-transform-style:preserve-3d;
		-webkit-transform-style:preserve-3d;
		transform-style:preserve-3d;
		-moz-transform-origin:100px 50%;
		-ms-transform-origin:100px 50%;
		-o-transform-origin:100px 50%;
		-webkit-transform-origin:100px 50%;
		transform-origin:100px 50%;
		-moz-animation:rotate 10s infinite linear;
		-webkit-animation:rotate 10s infinite linear;
		animation:rotate 10s infinite linear;
		position:absolute;
		top:120px;
		left:140px
		

	}
	
	
	


.stage .cube:hover {
        animation-play-state:paused;
        -webkit-animation-play-state:paused; /* dla Google Chrome, Safari, Opera 15+ */