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");
            })
        })