<section class="fakePage">
  <p>Currently this demo is Webkit only </p>
	<div class="container">
		<div id="carousel">
			<figure class="carouselImage">
				<img src="https://tech.chrisyaxley.co.uk/images/carousel/image1.jpg" />
			</figure>
			<figure class="carouselImage">
				<img src="https://tech.chrisyaxley.co.uk/images/carousel/image2.jpg" />
			</figure>
			<figure class="carouselImage">
				<img src="https://tech.chrisyaxley.co.uk/images/carousel/image3.jpg" />
			</figure>
			<figure class="carouselImage">
				<img src="https://tech.chrisyaxley.co.uk/images/carousel/image4.jpg" />
			</figure>
			<figure class="carouselImage">
				<img src="https://tech.chrisyaxley.co.uk/images/carousel/image5.jpg" />
			</figure>
			<figure class="carouselImage">
				<img src="https://tech.chrisyaxley.co.uk/images/carousel/image6.jpg" />
			</figure>
			<figure class="carouselImage">
				<img src="https://tech.chrisyaxley.co.uk/images/carousel/image7.jpg" />
			</figure>
			<figure class="carouselImage">
				<img src="https://tech.chrisyaxley.co.uk/images/carousel/image8.jpg" />
			</figure>
			<figure class="carouselImage">
				<img src="https://tech.chrisyaxley.co.uk/images/carousel/image9.jpg" />
			</figure>
		</div>
	</div>
	<div id="controls">
		<button id="prev">Prev</button>
		<button id="next">Next</button>
	</div>
</section>

.fakePage{
	width: 600px;
	margin: 50px auto;
}
.container {
  width: 100%;
  height: 140px;
  position: relative;
  -webkit-perspective: 2450px;
  margin: 0 auto 40px;
}
#carousel {
	 width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translateZ(288px);
	-webkit-transition: -webkit-transform 1s;
	-webkit-perspective-origin: center center;
	-webkit-transform-origin: 12% 0%;
	left:280px;
}

#carousel .playing{
	-webkit-animation-name: 'rotateCarousel';
}
#carousel figure {
	display: block;
	position: absolute;
	-webkit-transition: -webkit-transform 1s;
	margin:auto;
}
#carousel figure img{

}


#controls{
	padding:10px;
}

@-webkit-keyframes 'rotateCarousel' {
	0% {
		-webkit-transform: rotateY(0deg);

	}
	100% {
		-webkit-transform: rotateY(360deg);
	}
}

var amountOfImages = ($('.carouselImage').length);
		var i = 360 / amountOfImages;
		var rotateY = i;
		var translateZ = 32 * amountOfImages;
		
		$('.carouselImage').each(function() {
			$(this).css( '-webkit-transform', 'rotateY('+ rotateY +'deg) translateZ('+ translateZ +'px)');
    		rotateY = rotateY + i;
		});
				
		$('#carousel').css('-webkit-transform','rotateY('+ i + 'deg)');
		
		$('#next').click(function() {
			i = i-40;
			$('#carousel').css('-webkit-transform','rotateY('+ i + 'deg)');
		});
		
		$('#prev').click(function() {
			i = i+40;
			$('#carousel').css('-webkit-transform','rotateY('+ i + 'deg)');
		});