纯CSS3透明水晶盒的实现

打过了趟深圳返来后，已经快半个月，在广州购书中心逛了下，发明2本前端书《重构HTML-改进WEB应用的计划》、《CSS3 拭魅战》，看了一半《重构HTML》，发明看不下去，内里写的感受不是很受用，也许是此刻程度有限，参透不了，于是放下看《CSS3》。之前脑筋内里的CSS3都是在网上看的。这次买了本书，踏扎实实的打个大框架出来，省得过段时刻不消又乱了文理，根基把书过了一遍后，手也就痒痒的，想做个对象出来。

信托各人有看过这个例子：3D盒子，应该他是最早这样写的吧，书上第282页有个综汗庀匀战“计划动态立体盒子”的例子，实现方法跟它一样，我的盒子也是以它为原型来计划的，不外在实现方面有做修改、优化，以及增加了一些细节，下面是我的盒子Firefox截图：

1. 透明化了盒子，通透性强了，由于透明白，以是背部的三个面也就要做出来了，以是总共6个面，比原作多3个；
2. 投影镜像，让盒子的立体感更凶猛；
3. 边角线的处理赏罚，让盒子面与面之间过渡调和

你可以点击这里下载 源代码（只是写了moz下的结果，webkit的就没写了）

盒子的HTML布局很简朴，如下：

一个大盒子包住“前、后、左、右、上、下”6个面，由于定位发生层高的相关，以是它的次序着实是“后、下、左、前、上、右”，下面的div就会天然的叠在上面，就可以不写z-index了。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!