迎來到我的CSS3專題系列文章，更多精彩內容持續更新中，歡迎關注 ：)

近最在更新CSS3 3D的相關技術文章。得到了很多粉絲的關注，有粉絲私信我讓我出一期有關3D幻燈片的分享。吶，這不就來了嗎？

本章目標：

1. 3D幻燈片的基本布局
2. 3D幻燈片產生的問題和解決方案
3. 完整的3D幻燈片的制作

老規矩，我們先來看今天要實現的效果吧！

這種效果在網上也很常見，不知道大家是否用的時候是直接用別人的插件，那么今天我就來剖析一下這其中的原理。

這不就是把一張圖片分割成N份嘛，然后然后將每一塊貼上不同位置的背景圖片，不同的是，這個是將4張圖片分別貼在了一個長方開的盒子的上下前后四個面上了。所以呢？這個3D幻燈片的本質就是畫N個長方體的盒子。

那么看過我之前的文章 CSS3專題(二)—如果再有人說CSS3只能做立方體請拿這篇文章懟回去 就知道，要制作出一個長方形的盒子，我們只需要通過 translateZ和rotateX就可以實現了。

好了，接下來我們開始一步步的實現它吧

基礎布局

我們先來畫一個盒子看下。

我在box下一個item類的div，用來制作其中的一個盒子，里面有4個A標簽，這個用來作幻燈片的超鏈接，兩個span做為盒子的左右兩個面。

我們輪播圖片的寬高為(800*448)

先將外面的box設置成3D空間，使其內部的子元素隨父級的3D變換而變換。每一個小的盒子也是一個單位的3D空間。里面的span a 標簽均為絕對定位。

設置好基礎樣式后，再來針對每一個頁面設置不同的背景圖片和transform值。我們知道高是448，所以我們的tarnalateZ為224px;

左右兩個span面的分別用淺灰色來填充。

繼續跟著上下前后四個面進行不同的背景圖片的定位

這里面我們分割成20分，每一份就是40px。現在的效果是這樣的

接下來我們讓他轉起來看效果吧：

可以看到，前后上面四個面均已被填充上背景圖片了。^_^

然后我們再來復制3個盒子看下效果

整個盒子的布局基本上完成了。

如果說，20個面我們一個的去復制，那么維護起來就相當麻煩了，也沒有必要，所以我們這時候就要通過js去動態生成dom結構和樣式了。

動態生成dom結構和樣式

然后按照前面的樣式，生成對應的樣式表，創建style標簽，然后追加到head中去

現在的效果是這樣的：

可以看到，我們的dom結構和css樣式都已經成功生成 。

幻燈片的切換

從gif圖可以看出來，是每一個盒子在運動，它們運動的時間相同，通過不同的動畫延遲形成錯落的動畫。當我們點擊上一張的時候，旋轉是從右往左開始的，所以我們只需要將延遲時間倒過來即可。我是定義了兩個類來控制他們的運動方式。

我的設置是每一個盒子之間的動畫延遲相隔70ms。

然后我們給兩個按鈕各自綁定點擊事件。獲取到所有的盒子，讓每一個盒子每次繞X軸旋轉90deg,并且加上延遲時間的class

到這里，我們的效果已經封裝完成了。

效果是這樣的：

從圖上可以看到，每一個盒子之間有一絲細小的間隙，為什么會出現這樣的問題。我們來分析一下，我們在創建盒子的時候，我們對每一個盒子進行了translateZ(224px)，也就是說，此時我們將每個小盒子都放大了。這是導致間隙的根本原因。

那怎么解決呢？這個也好辦，我們將他們的父級 .box 的div，向里平移224px，即：設置

transform: translateZ(-224px);

所以我們還要保證.box的父級也是一個3D空間。所以我們設置body的樣式：transform-style: preserve-3d;perspective:800px;

我們將景深設置到box的父級body中去了。

一般來說，幻燈片都有一個自動切換的功能，我這沒有做，我把上一張下一張邏輯做出來了，定時器就不寫了，你們有興起自己動手去試試吧！

總結：

1）3D幻燈片的基礎布局其中由很多個小盒子拼湊成的。然后通過針對每個盒子進行旋轉，并設置他們的延遲時間間隔相同即可。

2）設置了translateZ后，整個小盒子都會被放大，要想保持原有的大小，我們需要將父級向里平移相等的距離。

這里是【暢哥聊技術】CSS3專題的系列文章，更多精彩內容持續更新中……

未完待續。。。