先上效果圖：
分析：
看效果圖，其實是好多些長方體在旋轉(zhuǎn)彤守。效果中一共有4幅圖徙融，把每幅圖都切割成一長條一長條洒缀，然后這四幅圖的每一長條都拼接成一個長方體，進行旋轉(zhuǎn)變換欺冀。
html模板：
<div class="box">
<ul id="picList">
<li>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</li>
</ul>
</div>
結(jié)合之前的3D立方體效果帝洪。將代碼中的一些重用代碼利用.
剩下兩個邊用兩個span標(biāo)簽，填充黑色脚猾，來充當(dāng)左右兩個邊。
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元素會覆蓋第一個元素右側(cè)黑邊称勋； 第三個會遮住第二個的右側(cè)黑邊 ......
到中間分開了。右邊的 第二個元素左側(cè)黑邊遮住了第一個元素 ......
所以黑邊出來了涯竟。
解決辦法：
以中間為分界點赡鲜。左邊的層級越來越高空厌。右邊的li元素層級越來越低。
這樣银酬，右側(cè)的每個 li 元素的黑邊因為層級比前一個元素弱所以被前一個元素遮住了嘲更。
所以通過js設(shè)置樣式，給style標(biāo)簽設(shè)置 id 值揩瞪，并定義一個ostyle 變量赋朦，通過它來設(shè)置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;
此時李破，效果如圖：
我們旋轉(zhuǎn)45度看一下效果：
正常宠哄，接下去設(shè)置下按鈕。
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嗤攻，其實是旋轉(zhuǎn)-90度毛嫉；點擊2，旋轉(zhuǎn)-180度屯曹；點擊3狱庇，旋轉(zhuǎn)-270度；點擊4恶耽，旋轉(zhuǎn)-360度密任。
js代碼：
3D圖片旋轉(zhuǎn)輪播效果結(jié)束
不積跬步無以至千里
