打过了趟深圳回来后，已经快半个月，在广州购书中心逛了下，发现2本前端书《重构HTML-改善WEB应用的设计》、《CSS3 实战》，看了一半《重构HTML》，发现看不下去，里面写的感觉不是很受用，可能是现在水平有限，参透不了，于是放下看《CSS3》。之前脑子里面的CSS3都是在网上看的。这次买了本书，踏踏实实的打个大框架出来，免得过段时间不用又乱了文理，基本把书过了一遍后，手也就痒痒的，想做个东西出来。

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

1. 透明化了盒子，通透性强了，因为透明了，所以背部的三个面也就要做出来了，所以总共6个面，比原作多3个；
2. 投影镜像，让盒子的立体感更强烈；
3. 边角线的处理，让盒子面与面之间过渡和谐

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

盒子的HTML结构很简单，如下：

<div class="box">
    <div class="inBox box_before">前</div>
    <div class="inBox box_back">后</div>
    <div class="inBox box_left">左</div>
    <div class="inBox box_right">右</div>
    <div class="inBox box_top">上</div>
    <div class="inBox box_bottom">下</div>
</div>

一个大盒子包住“前、后、左、右、上、下”6个面，因为定位产生层高的关系，所以它的顺序其实是“后、下、左、前、上、右”，下面的div就会自然的叠在上面，就可以不写z-index了。

出处：蓝色理想
责任编辑：bluehearts

上一页 下一页 纯CSS3透明水晶盒 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。