純CSS3透明水晶盒的實現

打過了趟深圳回來后，已經快半個月，在廣州購書中心逛了下，發現2本前端書《重構HTML-改善WEB應用的設計》、《CSS3 實戰》，看了一半《重構HTML》，發現看不下去，里面寫的感覺不是很受用，可能是現在水平有限，參透不了，于是放下看《CSS3》。之前腦子里面的CSS3都是在網上看的。這次買了本書，踏踏實實的打個大框架出來，免得過段時間不用又亂了文理，基本把書過了一遍后，手也就癢癢的，想做個東西出來。

相信大家有看過這個例子：3D盒子，應該他是最早這樣寫的吧，書上第282頁有個綜合實戰“設計動態立體盒子”的例子，實現方式跟它一樣，我的盒子也是以它為原型來設計的，不過在實現方面有做修改、優化，以及增添了一些細節，下面是我的盒子Firefox截圖：

1. 透明化了盒子，通透性強了，因為透明了，所以背部的三個面也就要做出來了，所以總共6個面，比原作多3個；
2. 投影鏡像，讓盒子的立體感更強烈；
3. 邊角線的處理，讓盒子面與面之間過渡和諧

你可以點擊這里下載 源代碼（只是寫了moz下的效果，webkit的就沒寫了）

盒子的HTML結構很簡單，如下：

一個大盒子包住“前、后、左、右、上、下”6個面，因為定位產生層高的關系，所以它的順序其實是“后、下、左、前、上、右”，下面的div就會自然的疊在上面，就可以不寫z-index了。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈