3D轮播图

3D轮播图

效果如下：

• 思路：

1. 首选先写好3D轮播图的结构

<div class="view">
		<ul>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
		</ul>
		<!-- 左右两个按钮 -->
		<a href="#" class="pre">&lt;</a>
		<a href="#" class="next">&gt;</a>
	</div>

可以看出，有5个li标签，他们充当的角色是：每一个面（上下前后共四个面）的五部分。
每个li标签下面包含4个span标签，分为立方体的四个面（上下前后）。
li标签排列示例：

2. 第二步是为其添加3D样式，这里其实是做了一个半封闭（不包含左右）的立方体。

body {
		padding: 0px;
		margin: 0px;
	}
	.view {
		position: relative;
		width: 560px;
		height: 300px;
		margin: 100px auto;
	}
	ul {
		width: 100%;
		height: 100%;
		list-style: none;
		margin: 0px;
		padding: 0px;
		/*transform: rotate3d(1,1,0,-30deg);*/
		transform-style: preserve-3d;
	}
	ul > li {
		position: relative;
		float: left;
		width: 20%;
		height: 100%;
		transition: transform 1.0s linear;
		transform-style: preserve-3d;
	}
	ul > li >span {
		position: absolute;
		left: 0px;
		top: 0px;
		display: block;
		height: 100%;
		width: 100%;
	}
	ul > li > span:nth-of-type(1) {
		background: url("images/q1.jpg");
		transform: translateZ(150px);
	}
	ul > li > span:nth-of-type(2) {
		background: url("images/q2.jpg");
		transform: translateY(-150px) rotateX(90deg)
	}
	ul > li > span:nth-of-type(3) {
		background: url("images/q3.jpg");
		transform: translateZ(-150px) rotateX(180deg);
	}
	ul > li > span:nth-of-type(4) {
		background: url("images/q4.jpg");
		transform: translateY(150px) rotateX(-90deg);
	}
	ul > li:nth-of-type(2) > span {
		background-position: -100%;
	}
	ul > li:nth-of-type(3) > span {
		background-position: -200%;
	}
	ul > li:nth-of-type(4) > span {
		background-position: -300%;
	}
	ul > li:nth-of-type(5) > span {
		background-position: -400%;
	}
	.view > a {
		display: none;
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		height: 45px;
		width: 45px;
		font: 400 14px/45px "microsoft yahei";
		text-align: center;
		color: #fff;
		background-color: rgba(0,0,0,0.6);
		text-decoration: none;
	}
	.view:hover a{
		display: block;
	}
	.pre {
		left: 0px;
	}
	.next {
		right: 0px;
	}

书写完结构和样式之后，最后是JavaScript代码

<script>
		var pre = document.querySelector(".pre");
		var next = document.querySelector(".next");
		var liArr = document.querySelectorAll("li");
		//新建一个延时数组，后面调用
		var delayArr = [0,0.2,0.4,0.6,0.8];、、自定义一个延时数组
		var key = 0;//用来记录li翻转的次数
		var bool = true;//防止多次点击
		next.onclick = function (){
			if(bool){
				key--;
				bool = false;
				for(var i=0; i<liArr.length; i++){
					liArr[i].style.transform = 'rotateX('+key*90+'deg)';//设置每一个li元素的翻转角度
					liArr[i].style.transitionDelay = delayArr[i]+"s";//设置每一个li元素的延时时间
				}
				setTimeout(function(){
					bool = true;
				},1000);
			}
		}
		pre.onclick = function (){
			if(bool){
				key++;
				bool = false;
				for(var i=0; i<liArr.length; i++){
					liArr[i].style.transform = 'rotateX('+key*90+'deg)';
					liArr[i].style.transitionDelay = delayArr[i]+"s";
				}
				setTimeout(function(){
					bool = true;
				},1000);
			}
		}
	</script>