<div class="carousel">
	<figure>
    <img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
    <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
    <img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>
body {
	margin: 0;
	font-family: 'Roboto';
	font-size: 16px;
	
	display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

// Carousel configuration parameters
$n: 8;
$item-width: 400px;
$item-separation: 80px;
$viewer-distance: 500px;

// Derived variables
$theta: 2 * 3.141592653589793 / $n; 
$apothem: 482.842712474619px;

.carousel {
	padding: 20px;

	perspective: $viewer-distance;
	overflow: hidden;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	> * {
		flex: 0 0 auto;
	}
	
	figure {
		margin: 0;
		
		width: $item-width;
		transform-style: preserve-3d;
		transition: transform 0.5s;
		transform-origin: 50% 50% (-$apothem);
		
		img {
			width: 100%;
			box-sizing: border-box;
			padding: 0 $item-separation / 2;
			
			opacity: 0.9;
			
			&:not(:first-of-type) {
				position: absolute;
				left: 0;
				top: 0;
				transform-origin: 50% 50% (-$apothem);
			}
			
			@for $i from 2 through $n {
				&:nth-child(#{$i}) {
					transform: rotateY(#{($i - 1) * $theta}rad);
				}
			}
		}
	}
	
	nav {
		display: flex;
		justify-content: center;
		margin: 20px 0 0;
		
		button {
			flex: 0 0 auto;
			margin: 0 5px;
			
			cursor: pointer;
			
			color: #333;
			background: none;
			border: 1px solid;
			letter-spacing: 1px;
			padding: 5px 10px;
		}
	}
	
}
View Compiled
var
	carousel = document.querySelector('.carousel'),
	figure = carousel.querySelector('figure'),
	nav = carousel.querySelector('nav'),
	numImages = figure.childElementCount,
	theta =  2 * Math.PI / numImages,
	currImage = 0
;
	
nav.addEventListener('click', onClick, true);

function onClick(e) {
	e.stopPropagation();
	
	var t = e.target;
	if (t.tagName.toUpperCase() != 'BUTTON')
		return;
	
	if (t.classList.contains('next')) {
		currImage++;
	}
	else {
		currImage--;
	}
	
	figure.style.transform = `rotateY(${currImage * -theta}rad)`;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto

External JavaScript

This Pen doesn't use any external JavaScript resources.