CSS3实现3D盒子效果
这跟“3D盒子”的实现方式一样，我的盒子也是以它为原型来设计的。
整个盒子的HTML结构很简单，如下：
<div class=”cube”>
<div class=”backface”>后</div>
<div class=”bottomface”><div>下</div></div>
<div class=”leftface”>左</div>
<div class=”frontface”>前</div>
<div class=”topface”><div>上</div></div>
<div class=”rightface”>右</div>
</div>
一，盒子定位
首先初始化盒子的宽，高，背景色等，然后开始定位六个面，我是先从简单的四个面开始，这四个面分别是“前、后、左、右”，最后定位“上、下”，定位四个比
较简单的面的时候你会发现，前面跟后面“-moz-transform”属性是一样的，你只不过把top跟left属性设置下就好了，当然，左面跟右面也
一样。稍微有点不同的是上面跟下面，细心的可能会发现他们分别又嵌套了个div，这是因为他们不近要设置“skewY、scaleY”还需要设置
“rotate”，当然他们是不能在一个div里写，因为“旋转”跟“斜切”他们之间会有影响。简单的说
“旋转后斜切”-moz-transform:rotate(-40deg) skew(30deg,20deg);
“斜切后旋转”-moz-transform:skew(30deg,20deg) rotate(-40deg);
虽说只是顺序变化了，但是效果是不一样的。（有兴趣的可以研究下）
盒子定位代码如下：(此代码仅供参考)
body{background-color: #ccc;color: #727271}
.cube {
position: relative;
top: 200px;
left: 200px;
}
.backface,.bottomface div,.leftface,.frontface,.topface div,.rightface{
width:150px;
height:150px;
padding:10px;
line-height: 150px;
opacity: 0.5;
text-align:center;
}
.backface{
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
background-color: #ddd;
left: 200px;
}
.bottomface{
-moz-transform: rotate(60deg);
position: absolute;
left: 85px;
top: 135px;
}
.leftface{
-moz-transform: skewY(30deg);
background-color: #e8e8e8;
position: absolute;
top:100px;
}
.frontface{
-moz-transform: skewY(-30deg);
background-color: #DDDDDD;
position: absolute;
left: 170px;
top:100px;
}
.topface{
-moz-transform: rotate(60deg);
position: absolute;
left: 85px;
top: -35px;
}
.rightface{
-moz-transform: skewY(30deg);
background-color: #e1e1e1;
position: absolute;
left: 170px;
top:0;
}
.bottomface div{
-moz-transform: skewY(-30deg) scaleY(1.16);
background-color: #d8d8d8;
box-shadow:1px 0px 0px #f6f6f6,0px -1px 0px #f6f6f6,-1px 0px 0px #f6f6f6,0px 1px 0px #f6f6f6;
}
.topface div{
-moz-transform: skewY(-30deg) scaleY(1.16);
background-color: #EEEEEE;
}
对于盒子的边框线，这里不建议用border来写，因为如果用border来写的话，border的宽度会跟width重叠，导致盒子占据的空间为150+1+1=152px，，而且border也不贴着边界，所以我建议用box-shadow来写：
box-shadow与text-shadow一样，只不过box-shadow给div等元素增加边框线，而text-shadow给文字增加描边。
举个简单的例子：
box-shadow:2px 0px 0px red,0px -2px 0px red,-2px 0px 0px red,0px 2px 0px red;
此参数跟padding、margin的参数类似，顺序仍是上、右、下、左。
二、打开盒子
打开盒子的代码也比较简单，效果图如下：
代码如下：
.cube .frontface:hover{
-moz-transform: skewY(-15deg);（可以修改skewY的值，以修改开口的大小）
background-color: #DDDDDD;
position: absolute;
left: 170px;
top:125px;
}
此外，我在盒子的底部还增加了投影的效果，如果需要的话可以增加试试。
因为我对色彩没有什么研究，所以做出来的盒子没有那么美观，有兴趣的朋友可以指点，帮忙美化下！
