相信大家有看过这个例子：3D盒子，在书《CSS3 实战》上第282页有个综合实战“设计动态立体盒子”的例子，实现方式跟它一样，我的盒子也是以它为原型来设计的，不过在实现方面有做修改、优化，以及增添了一些细节，下面是我的盒子Firefox截图：
你可以点击这里下载 源代码（只是写了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代码也就简 洁了很多。
如果你看了代码，没有头晕的话，会不会有这么一个疑惑，为什么不用border来写边框线?
如果用border来写的话，border的宽度会跟width重叠，导致盒子占据的空间为200 1 1=202px，很恶心的数字，而且border也不贴着边界，如图：
所以用这样一种做法来实现边框效果：box-shadow/text-shadow ；
一般我们是用border来给元素描边，前几天逛论坛的时候，看到这样一种做法：给文字描边。
一般思维会想到text-shadow这个属性，但是它是投影，跟描边还是有区别的，text-shadow写法如下：
text-shadow:2px 0px 0px #f00；
投影效果如图：
具体的投影资料可以参考我这篇文章：CSS3阴影；
上面是在没有羽化的情况下向右偏移，然而text-shadow可以多重投影，那么如果向上下左右四个方向同时投影，会怎么样呢?
text-shadow:2px 0px 0px #f00,0px -2px 0px #f00,-2px 0px 0px #f00,0px 2px 0px #f00;
投影效果如图：
就变成适应文字形状的描边效果了，当初因为border不能满足文字的描边需求，才想出这样的法子来实现描边，那现在反推，既然border不能用来描边了，那就用box-shadow投影描边的方法来实现边框。
做出来的效果如下：
我给底部写了个投影：
-webkit-box-shadow:-1px 1px 2px rgba(50,50,50,0.1);
少许的向前向右偏移，基本的造型效果就已经出来了，但是这样还不行，盒子的透明是透明了，但是感觉朦朦胧胧的，应该加强透明的处理，要不然体现不出通透性（可以跟第一个图对比下）。
每个面受光不同，所以透明度也应该有所区别，我把上，前，右对着浏览者的透明度调低于后面，然后拉出半透明到透明的渐变叠加到基本的盒子颜色上，产生层次，我都是很淡的过渡色叠加，渐变写法如下：
background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.3),rgba(255,255,255,0.2) 40%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0.1));
由左上到右下拉斜线渐变，从0% 0.3到40% 0.2，70% 0.2到100% 0.1；颜色很淡，如果把系数调大调深的话，渐变色就会很明显，由于里面各个面的渐变各不同，就不一一解释，相信看了源文件就会明白的了，我也是跟着自己 感觉拉的渐变，没有很专业的光线投射研究，如果有错的地方你看出来了还望指出。
当调整出各个面的颜色之后，发现“前上右”面与面之间有边线分割，看起来很整齐，但是后面我原本没有画边线，结果‘左’跟‘后’有点混，所以还是12条边线一一画出，妥当些，前面的边线透明度为0.6，侧面的0.4，后面的0.2，突出层次。
原本想用reflect来实现投影的，但是效果不理想，投影会夹杂着原图层的背景色，做不出来半透明到透明的效果来，而且reflect是 webkit独 有的，firefox没有，另想它法，然而不可能为了投影效果添加新标签，得不偿失，在抛弃IE的情况下自然而然的会想到伪类，上面边框渐变 已经用了after，所以这里的投影我用before来做，同时，伪类做投影还有个好处：伪类层是相对于原图层的，所以修改原图层位置变形状态的时候，伪类层也会相对的修改。定位在对应的面正下方，向着用户的只有前跟右，所以就做了两个投影，如图：
普通状态盒子是闭合的，如“前”面所示，伪类层也跟着原图层一样进行了斜切变换，然后我设置了鼠标滑过就“打开”的效果，仅仅是这样一行代码：
.box .box_right:hover{-moz-transform:skew(0deg, 0deg);}
让不用去修改伪类投影层，它自动的就适应了原图层，恢复了变换状态。
还有一个点，就是投影是由上至下呈半透明至透明的渐变，对于背景色这个很容易就可以实现
本文作者来自天津求谛互动，转载请注明出处：求谛互动（http://qd218.com）
选择天津网站建设公司-求谛互动，优质服务，绝对不容错过 ！
1. 优秀的网络资源，稳定的网站和速度保证
（配送双线独立ip空间，国际A级BGP机房，99.5% 的主机在线时间）
2. 7年天津网站建设经验，优秀的技术和设计水平，更放心
3. 全程省心服务，不必担心自己不懂网络，更省心。
------------------------------------------------------------------------------------------
我们的与众不同之处：
免费网络营销顾问：我们为您提供免费的网络营销顾问服务，您需要了解关于如何开展网络营销，电子商务，网站设计等的事宜，欢迎随时联系我们。
seo友好的网站管理系统：除了优质的网站空间，网站管理系统，和网站设计外，我们的网站管理系统更是seo友好的，包括：自定义栏目名，Google Sitemap自动生成，静态页面生成等等，让您的网站。
免费网络营销培训：如何更好的投放网络广告，如何提高网络广告的投资回报，如何发帖子，
如何优化网站，我们有丰富的经验开放给您！祝君成功！
联系我们：022-66351726
天津网站建设本站关键词：天津网站建设 天津网站制作 天津网站设计 网站建设 天津网站建设公司 网站建设
