3D旋转相册

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link type="text/css" href="https://itsse.oss-cn-shanghai.aliyuncs.com/lib/chaos/3DpotoAlbum.css" rel="stylesheet" />
	<script src="https://itsse.oss-cn-shanghai.aliyuncs.com/lib/chaos/3DpotoAlbum.js"></script>
	<!-- <style>
		.minbox li:nth-child(1) {
			background: url(./img/01.png) no-repeat 0 0;
		}

		.minbox li:nth-child(2) {
			background: url(./img/02.png) no-repeat 0 0;
		}

		.minbox li:nth-child(3) {
			background: url(./img/03.png) no-repeat 0 0;
		}

		.minbox li:nth-child(4) {
			background: url(./img/04.png) no-repeat 0 0;
		}

		.minbox li:nth-child(5) {
			background: url(./img/05.png) no-repeat 0 0;
		}

		.minbox li:nth-child(6) {
			background: url(./img/06.png) no-repeat 0 0;
		}

		/* 外部 */
		.maxbox li:nth-child(1) {
			background: url(./img/1.png) no-repeat 0 0;
		}

		.maxbox li:nth-child(2) {
			background: url(./img/2.png) no-repeat 0 0;
		}

		.maxbox li:nth-child(3) {
			background: url(./img/3.png) no-repeat 0 0;
		}

		.maxbox li:nth-child(4) {
			background: url(./img/4.png) no-repeat 0 0;
		}

		.maxbox li:nth-child(5) {
			background: url(./img/5.png) no-repeat 0 0;
		}

		.maxbox li:nth-child(6) {
			background: url(./img/6.png) no-repeat 0 0;
		}
	</style> -->
</head>

<body>
	<div class="box">
		<!-- 图片规格 100*100 -->
		<ul class="minbox">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<!-- 图片规格 400*400 -->
		<ol class="maxbox">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</div>
</body>
</html>
图片规格：ul中的图片为100*100规格，ol中的图片为400*400。
更换图片：释放style标签，修改背景图片地址即可
WishMeLz

3D旋转相册
