h5+c3复习中的切割轮播图

切割轮播图

今天让我们来看一下切割轮播图，首先这次代码，主要为了联系一下变换transform方面的知识

html代码：

<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>
</ul>
</div>

css代码：

*{
				margin: 0;
				padding: 0;
			}
			.view{
				width:560px;
				height: 300px;
				margin: 100px auto;
				position: relative;
			}
			ul{
				width: 100%;
				height: 100%;
				list-style: none;
				transform-style: preserve-3d;
				/*transform: rotate3d(1,1,0,-30deg);*/
			}
			ul>li{
				width: 25%;
				height: 100%;
				position: relative;
				float: left;
				transform-style: preserve-3d;
				transition: transform 0.5s;
			}
			ul>li>span{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;

			}
			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% 0;
			}
			ul>li:nth-of-type(3)>span{
				background-position: -200% 0;
			}
			ul>li:nth-of-type(4)>span{
				background-position: -300% 0;
			}
			.pre,.next{
				width: 60px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				position: absolute;
				top: 50%;
				text-decoration: none;
				font-size: 40px;
				transform: translate(0,-50%);
				background-color: rgba(0,0,0,.5);
				color: #fff;
			}
			.pre{
				left: 0;
			}
			.next{
				right: 0;
			}

jquery代码:

<script src="jquery.min.js"></script>
		<script>
			$(function() {
				var flag=true;
				var index=0;
				$(".next").click(function(){
					if(flag==true){
						flag=false;
						index--;
						$("li").each(function(key,value){
						$(this).css({
							"transform":"rotateX("+(index*90)+"deg)",
							"transition-delay":(key*0.2)+"s"
						})
						setTimeout(function(){
							flag=true;
						},1000);
					})
					}
				})
				$(".pre").click(function(){
					if(flag==true){
						flag=false;
						index++;
						$("li").each(function(key,value){
						$(this).css({
							"transform":"rotateX("+(index*90)+"deg)",
							"transition-delay":(key*0.2)+"s"
						})
						setTimeout(function(){
							flag=true;
						},1000);
					})
					}
				})

			})
		</script>

运行页面：

今天内容考验我们的几何能力还有你对3d转换的理解，好了就到这里了