3d效果的图片轮播
CSS3的3d变换
CSS3给我们提供了一个新的功能，那就是3d变换。3d变换和2d变换的基本API函数类似，只不过多了些在Z轴上的操作，不难使用。
但是，为了让元素拥有3d变换的功能，我们需要给他的父元素设置相应的变换属性。与其相关的属性为perspective和transform-style。在新版的Chrome中已不需要添加私有前缀，不过为了兼容之前版本的浏览器，建议还是加上私有前缀（本例中并未添加私有前缀）。
perspective属性取值为：none|number。当值为数字时，意味着该元素与我们眼睛之间的距离为该值。该属性定义在需要3d变换的元素的父元素上，声明该属性意味着定义了一个3d空间，值越小，3d效果越明显。其实可以有种方法更易理解，3d变换坐标系的Z轴我们可以类比为z-index定义的层叠上下文，而perspective取值就为眼睛与该层之间的距离。
可以借用一张图来阐述：
d值为设置的perspective属性，z值为元素所在Z轴距离屏幕的长度，上图为z值为正值，下图的z值为负值。
对于transform-style属性的取值有两种，分别为flat和preserve-3d。flat意味不存在3d空间，在Z平面上的变换会平展到x-y面上来，没有3d效果。preserve-3d则将该元素的所有子元素放入3d空间中，执行3d变换。
综上来看，transform-style可以为子元素创建3d空间，perspective可以设置视距（透视视深），而且该值只对第一个子元素有效。这两个属性可以结合使用，transform-style可以延续设置的视深，供其子元素使用。
实现3d轮播
轮播的实现并不难，在这里只是将2d转换为3d效果。为了实现要求，我们需要对图片呈现区域进行分片，每个分片执行不同的3d操作，造成很炫的视觉效果。
body{margin: 0;padding: 0;overflow: hidden;} .wrap{width: 560px;margin:30px auto;border: 10px solid #000000;} .win{position: relative;perspective:none;} .segment{transform-style: preserve-3d;} .segment p{margin:0;padding:0;position:absolute;width:140px;height:100px;background: url(img/0.jpg)} .container{height: 300px;} .shadow{height:100%;width:100%;position: absolute;left:0;top:0;box-shadow: inset 0 0 40px;} .tools{margin: 0;padding: 0;list-style: none;position: absolute;right:30px;bottom: 20px;} .tools li{float: left;margin-right:20px;} .btn>a:nth-child(1){display:block;width:45px;height:45px;background: url(./img/icons.png) 0 0 no-repeat;position: absolute;left:10px;top:135px;} .btn>a:nth-child(2){display:block;width:45px;height:45px;background: url(./img/icons.png) 0 -45px no-repeat;position: absolute;right:10px;top:135px;} .win .fly p{opacity: 0;} .win .fly p:nth-child(1){transform: rotateX(30deg) rotateY(10deg) translateZ(500px);} .win .fly p:nth-child(2){transform: rotateX(330deg) rotateY(10deg) translateZ(500px);} .win .fly p:nth-child(3){transform: rotateX(3450deg) rotateY(10deg) translateZ(500px);} .win .fly p:nth-child(4){transform: rotateX(-30deg) rotateY(-10deg) translateZ(500px);} .win .fly p:nth-child(5){transform: rotateX(330deg) rotateY(10deg) translateZ(500px);} .win .fly p:nth-child(6){transform: rotateX(40deg) rotateY(20deg) translateZ(500px);} .win .fly p:nth-child(7){transform: rotateX(340deg) rotateY(10deg) translateZ(500px);} .win .fly p:nth-child(8){transform: rotateX(3450deg) rotateY(60deg) translateZ(500px);} .win .fly p:nth-child(9){transform: rotateX(230deg) rotateY(10deg) translateZ(500px);} .win .fly p:nth-child(10){transform: rotateX(20deg) rotateY(20deg) translateZ(500px);} .win .fly p:nth-child(11){transform:rotateX(30deg) rotateY(10deg) translateZ(500px);} .win .fly p:nth-child(12){transform: rotateX(10deg) rotateY(15deg) translateZ(500px);} .tools .current{background: url(./img/icons.png) -8px -125px no-repeat;} .tools li{background: url(./img/icons.png) -23px -125px;width: 15px;height: 15px;}
<div class="wrap"> <div class="win"> <div class="segment"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <div class="container"> <img id="pic" src="./img/0.jpg"> </div> <div class="shadow"></div> <div class="btn"> <a id="left" href="javascript:void 0"></a> <a id="right" href="javascript:void 0"></a> </div> <ul class="tools"> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div>
$(function(){ var ps = $("p",".segment"), p, c,m; var pic = $("#pic"),left = $("#left"), right = $("#right"); var counter = 0; var lis = $(".tools li"); // 将图片区域分成12个片段 function slice(){ for(var i=0;i<12;i++){ c = Math.floor(i / 4); m = i % 4; p = $(ps[i]); p.css({ left: m*140+"px", top: c*100+"px" }); p.css("background-position",-m*140+"px "+ (-c*100)+"px"); } } slice(); // 设置渐进和背景图片 function coo(){ $(".segment").addClass("fly"); $(".segment p").css("transition","all 1s ease 0s"); pic.attr("src","./img/"+counter+".jpg"); setTimeout(function(){ $(".segment p").css({ "transition":"none", "background-image": "url(img/"+counter+".jpg)" }); $(".segment").removeClass("fly"); },1000) } left.click(function(e){ if(counter == 0){ counter = 4; }else{ counter--; } coo(); $.each(lis,function(li){ $(lis[li]).removeClass("current"); }); $(lis[counter]).addClass("current"); }); right.click(function(){ if(counter == 4){ counter = 0; }else{ counter++; } coo(); $.each(lis,function(li){ $(lis[li]).removeClass("current"); }); $(lis[counter]).addClass("current"); }) })
