首先，我們下來了解一下perspective和transform都是做什么的。
transform -- css3屬性，可以對元素進(jìn)行變換(2d/3d)，包括平移translate,旋轉(zhuǎn)rotate,縮放scale,等等（完整取值參考 W3C）。
perspective -- css3屬性，當(dāng)元素涉及3d變換時(shí)，perspective可以定義我們眼睛看到的3d立體效果，即空間感。通俗地解釋就比如你去電影院看電影，你距離大熒幕的距離就相當(dāng)于perspective的值啦，離得越遠(yuǎn)則perspective值越大，看到空間效果也就會不一樣！
接下來，我們就進(jìn)入正題了。
先上3d輪播圖效果圖：
圖一
圖二
圖三
***圖一為前一張輪播圖，圖二是輪播圖前后切換時(shí)的3d效果圖，圖三為后一張輪播圖***
實(shí)現(xiàn)上面的效果，需要三層頁面結(jié)構(gòu)：
1. 最外面的容器.swiper-wrapper，即圖中天藍(lán)色邊框這個部分。為這部分設(shè)置關(guān)鍵css如下：
transform-style: preserve-3d; //3d旋轉(zhuǎn)效果
perspective: 1000px; //3d立體空間感
perspective-origin: 50% 50%; //觀察視角， 50% 50%代表從中間觀察
2. 用ul包裹的li多邊體。參考圖二可知，我們的每張圖片實(shí)際上是由n個片段拼接而成，這是怎么實(shí)現(xiàn)的呢？很簡單，多個li + background-position定位輕松實(shí)現(xiàn)啦；
3. li里的div數(shù)組，數(shù)組的長度等于輪播圖的總張數(shù)。這個div數(shù)組將所有的圖片圍繞x軸形成了一個多邊體。完整多邊體效果如圖四：
圖四
那么怎么實(shí)現(xiàn)這個多邊體呢？這就要用到今天的transform屬性了。假設(shè)一個多邊體有m條邊，每個div平面代表一條邊(即每張圖片的1/n)，我們先將每個div平面絕對定位到li的左上角(left:0;top:0;)，此時(shí)的每個div平面都在x軸與y軸形成的平面上，也就是電腦屏幕平面上。接下來我們將每個div平面依次進(jìn)行變換transform: rotateX((360/m)*i deg) translateZ(z軸位移量)，先圍繞x軸依次旋轉(zhuǎn)（默認(rèn)旋轉(zhuǎn)點(diǎn)是平面中心，可以通過transform-origin設(shè)置,我們就是用默認(rèn)值）(360/m)*0、 (360/m)*1 、(360/m)*2 、... 、直到(360/m)*(m-1)，這樣形成的下面的效果，圖五：
圖五
咦？不是多邊體么？別急，接下里translateZ(z軸位移量)登場了，這個值是多少自己拿小本本算去... 反正是每個邊到中心點(diǎn)的垂直距離... ok, 看一下每個邊平移后的效果吧，圖六：
圖六
怎么超前的幾個面變這么大了？都超出粉色的框框了... 沒錯，這就是平移translateZ產(chǎn)生的效果，立體地看，就是前面的幾個面都跑到電腦屏幕外面了，后面的幾個面跑到電腦屏幕后面了。還不明白？就是說電腦屏幕沿著這個多邊形的中點(diǎn)，并且從多邊形的垂直方向穿透過去了。還不明白的話我也沒轍了...閉眼想像去吧...
（tips: 以面對電腦屏幕的視角看，假設(shè)一個平面在屏幕上，則向右為其x軸正向，向下為其y軸正向，向屏幕外為其z軸正向。且當(dāng)這個平面旋轉(zhuǎn)時(shí)，他的3個軸也跟著旋轉(zhuǎn)。）
那怎么讓最外面的圖片放到電腦屏幕的平面上呢？聰明的人都知道了，把li代表的多邊形整體translateZ(z軸位移量)不就行啦！來看下效果圖，往上看，再往上看，再往上看，對了，就是圖四的效果了...
接下來給ul整體設(shè)置overflow:hidden;隱藏多出粉色邊框的部分，就看到圖一的效果了~
下方輪播圖切換點(diǎn)的控制：
這個就很簡單了，有m張圖，就放m個點(diǎn)。點(diǎn)擊第一個點(diǎn)（也是默認(rèn)情況），將每個li繞x軸旋轉(zhuǎn)(360/m)*0度；點(diǎn)擊第二個點(diǎn)，將每個li繞x軸旋轉(zhuǎn)(360/m)*1度；... 直到點(diǎn)擊第m個點(diǎn)，將每個li繞x軸旋轉(zhuǎn)(360/m)*(m-1)度。接下來，我們再給每個li多邊體加上過渡transition:1s;transition-delay:
說了這么多，效果都實(shí)現(xiàn)了，我咋還不講perspective呢？別急，這不是來了嘛... 如文章一開始所說，perspective會讓你看到一種3d立體空間感，而非二位平面的體驗(yàn)了。本例中的perspective用在了class=‘swiper-wrapper’的藍(lán)色邊框元素上，賦值perspective：1000px; 它的取值越小，你在電影院的座位越靠前，視覺效果越近；反之，取值越大，你在電影院座位約靠后，視角越遠(yuǎn)。實(shí)際應(yīng)用中，800-1000px效果較好，相當(dāng)于電影院四五排的座位，got it？聰明的人一定get了... 下面上對比效果圖：
完整代碼如下：
HTML：
1 <div class="swiper-wrapper">2 <ul id="swiper" class="swiper"></ul>3 <div id="dotlist" class="dots"></div>4 </div>
CSS：
View Code
JS：
View Code
不算彩蛋的彩蛋：
本例中圖片張數(shù)(div)，輪播效果翻轉(zhuǎn)片數(shù)(li)，初始顯示第幾張--都是定義在js變量中的，我們也可以在頁面上寫幾個input輸入控制這些值。這么簡單的事情我就不上代碼了啊哈哈哈。就這樣吧。
最后附上github源碼,需要的同學(xué)下載(彩蛋實(shí)現(xiàn)和代碼優(yōu)化的版本后續(xù)會更新到github)。
預(yù)覽地址： https://tinatingzhang.github.io/HTML-Demos/3D%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%89%B9%E6%95%88/index.html
http://www.cnblogs.com/zt-blog/p/6603877.html
