CSS3设计动态立体盒子:CSS3透明水晶盒

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

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

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

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

1
2
3
4
5
6
7
8

<div>
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>

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

一、框架定位

初始化盒子面，顶好宽高、定位、背景色等属性，然后把变换原点设定在右上角。

盒子面一个个做，先从简单的入手，前后左右难度系数是一样的，一个斜切SKEW效果就可以实现，然后就是再分开定位：“前、后面”用 skew(0deg,20deg); Y轴正向斜切，“左、右面”用skew(0deg,-20deg); Y轴负向斜切，然后再定位对齐，基本的框就出来 了。

然后就是鸡肋“上、下面”，它需要旋转后斜切才能完成，所以难度系数也就上升了，这里我说 “旋转后斜切”，而不是 “斜切后旋转”，是有区别的，我的写法如下：

-moz-transform:rotate(-40deg) skew(30deg,20deg);

如果这样写：

-moz-transform:skew(30deg,20deg) rotate(-40deg);

那跟预期的效果不一样，确定了的斜切效果会因为后面的旋转而变形。

不知道你有没有亲手做过那个盒子，我在做的时候发现，为什么它顶部的“盒子盖”比侧面的“盒子壁”多嵌套了一层DIV，用来分离transform变换效果，我尝试着只用一个DIV去实现，结果证明，只要先写rotate再skew就可以保持skew的斜切效果，从而html结构跟css代码也就简洁了很多。

二

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!