今天小编跟大家讲解下有关CSS 3D立方体制作 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 3D立方体制作 的相关资料，希望小伙伴们看了有所帮助。
无需Javascript, imagery, canvas 或者SVG，就可以利用最新的CSS制作出3D立方体，这的确是一件让人难以想象的事情。
目前制作出来的效果，只有Firefox 3.5，Safari 3.2+，Google Chorme支持。下面来为大家列举出相关演示和代码。
3D CSS
结果演示
单个静态3D立方体
支持浏览器：Safari 3.2+, Google Chrome, Firefox 3.5+
三个滑动的动态3D立方体
支持浏览器：Safari 4+, Google Chrome
怎么制作?
其实使用DIV容器的代码很简单，如下：
<div class="cube"><div class="topFace"><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;}
来源：爱蒂网
