页面的head部分，需引入必要的CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，多个div容器里分别放入不同的样式效果，代码如下：

<h1>3D旋转图片切换轮播</h1>
<h2>三张图片</h2>
<div class="carousel">
	<figure>
		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
	</figure>
	<nav>
		<button class="nav prev">上一张</button>
		<button class="nav next">下一张</button>
	</nav>
</div>

<h2>四张图片</h2>
<div class="carousel">
	<figure>
		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
		<img src="img/4.jpg" alt="">
	</figure>
	<nav>
		<button class="nav prev">上一张</button>
		<button class="nav next">下一张</button>
	</nav>
</div>

<h2>八张图片</h2>
<div class="carousel">
	<figure>
    		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
		<img src="img/4.jpg" alt="">
		<img src="img/5.jpg" alt="">
		<img src="img/6.jpg" alt="">
		<img src="img/7.jpg" alt="">
		<img src="img/8.jpg" alt="">
	</figure>
	<nav>
		<button class="nav prev">上一张</button>
		<button class="nav next">下一张</button>
	</nav>
</div>

<h2>八张图片，20像素间距</h2>
<div class="carousel" data-gap="20">
	<figure>
    		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
		<img src="img/4.jpg" alt="">
		<img src="img/5.jpg" alt="">
		<img src="img/6.jpg" alt="">
		<img src="img/7.jpg" alt="">
		<img src="img/8.jpg" alt="">
	</figure>
	<nav>
		<button class="nav prev">上一张</button>
		<button class="nav next">下一张</button>
	</nav>
</div>

<h2>八张图片，80像素间距</h2>
<div class="carousel" data-gap="80">
	<figure>
    		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
		<img src="img/4.jpg" alt="">
		<img src="img/5.jpg" alt="">
		<img src="img/6.jpg" alt="">
		<img src="img/7.jpg" alt="">
		<img src="img/8.jpg" alt="">
	</figure>
	<nav>
		<button class="nav prev">上一张</button>
		<button class="nav next">下一张</button>
	</nav>
</div>

<h2>隐藏的背面</h2>
<div class="carousel" data-gap="20" data-bfc>
	<figure>
    	<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
		<img src="img/4.jpg" alt="">
		<img src="img/5.jpg" alt="">
		<img src="img/6.jpg" alt="">
		<img src="img/7.jpg" alt="">
		<img src="img/8.jpg" alt="">
	</figure>
	<nav>
		<button class="nav prev">上一张</button>
		<button class="nav next">下一张</button>
	</nav>
</div>

页面的底部，通过javascript来设置图片的3D旋转效果，代码如下：

<script type="text/javascript">
window.addEventListener('load', function () {
	var carousels = document.querySelectorAll('.carousel');

	for (var i = 0; i < carousels.length; i++) {
		carousel(carousels[i]);
	}
});

function carousel(root) {
	var figure = root.querySelector('figure'),
	    nav = root.querySelector('nav'),
	    images = figure.children,
	    n = images.length,
	    gap = root.dataset.gap || 0,
	    bfc = 'bfc' in root.dataset,
	    theta = 2 * Math.PI / n,
	    currImage = 0;

	setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
	window.addEventListener('resize', function () {
		setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
	});

	setupNavigation();

	function setupCarousel(n, s) {
		var apothem = s / (2 * Math.tan(Math.PI / n));

		figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

		for (var i = 0; i < n; i++) {
			images[i].style.padding = gap + 'px';
		}for (i = 1; i < n; i++) {
			images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
			images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
		}
		if (bfc) for (i = 0; i < n; i++) {
			images[i].style.backfaceVisibility = 'hidden';
		}rotateCarousel(currImage);
	}

	function setupNavigation() {
		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--;
			}

			rotateCarousel(currImage);
		}
	}

	function rotateCarousel(imageIndex) {
		figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
	}
}
</script>