CSS3实现3D盒子效果
![](http://images0.cnblogs.com/blog/571465/201312/17115954-462f29b54c95498787cb875a208f2eb6.png)
这跟“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;
}
此外,我在盒子的底部还增加了投影的效果,如果需要的话可以增加试试。
因为我对色彩没有什么研究,所以做出来的盒子没有那么美观,有兴趣的朋友可以指点,帮忙美化下!