先上效果图：
分析：
看效果图，其实是好多些长方体在旋转。效果中一共有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; }
效果如下：
分析：
- 获取每个 li 元素
- 点击1，其实是旋转-90度；点击2，旋转-180度；点击3，旋转-270度；点击4，旋转-360度。
js代码：
3D图片旋转轮播效果结束
不积跬步无以至千里
