CSS 3D立方体制作_ Div+Css教程-查字典教程网

摘要：无需JavaScript,imagery,canvas或者SVG，就可以利用最新的CSS制作出3D立方体，这的确是一件让人难以想象的事情。目...

无需JavaScript, imagery, canvas 或者SVG，就可以利用最新的CSS制作出3D立方体，这的确是一件让人难以想象的事情。

目前制作出来的效果，只有Firefox 3.5，Safari 3.2+，Google Chorme支持。下面来为大家列举出相关演示和代码。

CSS 3D立方体制作1

3D CSS

结果演示

单个静态3D立方体

支持浏览器：Safari 3.2+, Google Chrome, Firefox 3.5+

三个滑动的动态3D立方体

支持浏览器：Safari 4+, Google Chrome

怎么制作?

其实使用DIV容器的代码很简单，如下：

<div>Content</div>

</div>

<div class="leftFace">Content</div>

<div class="rightFace">Content</div>

</div>

CSS来控制

.cube {

position: relative;

top: 200px;

}

.rightFace,

.leftFace,

.topFace div {

padding: 10px;

width: 180px;

height: 180px;

}

.rightFace,

.leftFace,

.topFace {

position: absolute;

}

.leftFace {

-webkit-transform: skewY(30deg);

-moz-transform: skewY(30deg);

background-color: #ccc;

}

.rightFace {

-webkit-transform: skewY(-30deg);

-moz-transform: skewY(-30deg);

background-color: #ddd;

left: 200px;

}

.topFace div {

-webkit-transform: skewY(-30deg) scaleY(1.16);

-moz-transform: skewY(-30deg) scaleY(1.16);

background-color: #eee;

font-size: 0.862em;

}

.topFace {

-webkit-transform: rotate(60deg);

-moz-transform: rotate(60deg);

top: -158px;

left: 100px;

}