3D图片旋转轮播

先上效果图：

分析：
看效果图，其实是好多些长方体在旋转。效果中一共有4幅图，把每幅图都切割成一长条一长条，然后这四幅图的每一长条都拼接成一个长方体，进行旋转变换。

html模板：

<div class="box">
    <ul id="picList">
        <li>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </li>
    </ul>
</div>

结合之前的3D立方体效果。将代码中的一些重用代码利用.
剩下两个边用两个span标签，填充黑色，来充当左右两个边。

html:

<div class="box">
    <ul id="picList">
        <li>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <span></span>
            <span></span>
        </li>
    </ul>
</div>

css：

.box{ width: 800px; margin: 30px auto; }

#picList{ margin:0; padding: 0; height: 360px; -webkit-perspective:800px; }

#picList li{ width: 25px; height: 360px; position: relative; list-style: none; float: left;              -webkit-transform-style: preserve-3d;
             -webkit-transform: translateZ(-180px) rotateX(0deg);
             }

#picList a{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#picList a:nth-of-type(1){ background: url(img/1.jpg) no-repeat;-webkit-transform: translateZ(180px); }

#picList a:nth-of-type(2){ background: url(img/2.jpg) no-repeat; -webkit-transform-origin:top; -webkit-transform: translateZ(-180px) rotateX(90deg);  }

#picList a:nth-of-type(3){ background: url(img/3.jpg) no-repeat;  -webkit-transform: translateZ(-180px); }

#picList a:nth-of-type(4){ background: url(img/4.jpg) no-repeat; -webkit-transform-origin:bottom; -webkit-transform: translateZ(-180px) rotateX(-90deg); }

#picList span{ width: 360px; height: 360px; background-color: #333; position: absolute; top: 0; }

#picList span:nth-of-type(1){ left: 0; -webkit-transform-origin: left; -webkit-transform:translateZ(180px) rotateY(90deg); }

#picList span:nth-of-type(2){ right: 0; -webkit-transform-origin: right; -webkit-transform:translateZ(180px) rotateY(-90deg);  }

此时，效果图如下：

那接下去就是通过js代码将图片完整显示出来。

window.onload = function(){

    var oPicList = document.getElementById("picList");
    var iLiW = 25;
    var sHtml = "";
    var iLength = oPicList.clientWidth/iLiW;


    for(var i=0; i<iLength; i++){

        sHtml += '<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
    }
    oPicList.innerHTML=sHtml;
}

此时，效果如下图：

可以看出有一个问题：

从中间分开，右边的每个 li 元素中的左边黑色面都显示出来了。

原因：

li 元素使用 position属性为relative，后面的元素层级会比前面的高。

第二个li元素会覆盖第一个元素右侧黑边； 第三个会遮住第二个的右侧黑边 ......

到中间分开了。右边的 第二个元素左侧黑边遮住了第一个元素 ......
所以黑边出来了。

解决办法：

以中间为分界点。左边的层级越来越高。右边的li元素层级越来越低。

这样，右侧的每个 li 元素的黑边因为层级比前一个元素弱所以被前一个元素遮住了。

所以通过js设置样式，给style标签设置 id 值，并定义一个ostyle 变量，通过它来设置style样式。

var oCss = document.getElementById("css");
var oStyle = "";
var index = 0;

for(var i=0; i<iLength; i++){

        i>iLength/2?index--:index++;

        oStyle += "#picList li:nth-of-type(" +(i+1)+ "){ z-index: " +index+ "}";
        oStyle += "#picList li:nth-of-type(" +(i+1)+ ") a{ background-position: -" +i*iLiW + "px 0px; }";

        sHtml += '<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
}
oPicList.innerHTML=sHtml;
oCss.innerHTML += oStyle;

此时，效果如图：

我们旋转45度看一下效果：

正常，接下去设置下按钮。
html模板改进：

<div class="box">
    <ul id="picList">
        <li>
        </li>
    </ul>
    <ol id="btns">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>

css:

#btns{ padding: 50px; height: 30px; }

#btns li{ height: 30px; width: 30px; background-color: #000; color: #fff; font-size:16px; font-weight: bold; line-height: 30px; text-align:center; margin: 0 10px; border-radius: 50%; float: left; list-style: none; cursor: pointer;}

#btns .active{ background-color: #f60; }

效果如下：

分析：

1. 获取每个 li 元素
2. 点击1，其实是旋转-90度；点击2，旋转-180度；点击3，旋转-270度；点击4，旋转-360度。

js代码：

3D图片旋转轮播效果结束

不积跬步无以至千里