<div class="periscope">
<div class="periscope_back"></div>
<div class="periscope_pipe floatingpipe"></div>
<div class="wheel1"></div>
<div class="wheel2"></div>
<div class="wheel3"></div>
<div class="wheel4"></div>
</div>

/*
==============================================
MAIN
==============================================
*/
html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  background: linear-gradient(0deg, #dd0000, #2f6c7f);
}
/*
==============================================
ELEMENTS
==============================================
*/
.periscope {  
  height: 55vw;
  width:55vw;  
  position: absolute;
  margin-left: 20vw;
  bottom:0;  
}
.periscope_back {
  z-index: 1;    
  background-image: url('http://themes.opderdan.de/platformer/periscope_base.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  height: 100%;
  width:100%;  
}
.periscope_pipe {
  z-index: 0;    
  background-image: url('http://themes.opderdan.de/platformer/periscope_pipe.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: center;      
  position: absolute;
  height: 100%;
  width:100%;       
  animation-name: floatingpipe;
	-webkit-animation-name: floatingpipe;

	animation-duration: 5.5s;	
	-webkit-animation-duration: 5.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floatingpipe {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(15%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}
@-webkit-keyframes floatingpipe {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(15%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

.wheel1 {
  z-index: 4;    
  background-image: url('http://themes.opderdan.de/platformer/periscope_wheel.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: center;      
  position: absolute;
  height: 10%;
  width:10%;   
  bottom:0;  
  margin-left: 15vw;    
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;  
}
.wheel2 {
  z-index: 4;    
  background-image: url('http://themes.opderdan.de/platformer/periscope_wheel.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: center;      
  position: absolute;
  height: 10%;
  width:10%;   
  bottom:0;  
  margin-left: 20vw;    
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;  
}
.wheel3 {
  z-index: 4;    
  background-image: url('http://themes.opderdan.de/platformer/periscope_wheel.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: center;      
  position: absolute;
  height: 10%;
  width:10%;   
  bottom:0;  
  margin-left: 25vw;    
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;  
}
.wheel4 {
  z-index: 4;    
  background-image: url('http://themes.opderdan.de/platformer/periscope_wheel.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: center;      
  position: absolute;
  height: 10%;
  width:10%;   
  bottom:0;  
  margin-left: 30vw;    
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;  
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); 
    } 
}
@-webkit-keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
    } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); transform:rotate(360deg); 
    } 
}