不管怎样，生活还是要继续向前走去。有的时候伤害和失败不见得是一件坏事，它会让你变得更好，孤单和失落亦是如此。每件事到最后一定会变成一件好事，只要你能够走到最后。纸上得来终觉浅，绝知此事要躬行。
无需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; } |
以上就是CSS 3D立方体制作。每个人都可以树立目标，但并不是每个人都能实现自己的目标。只要你付出劳动，总会得到目标的报偿。更多关于CSS 3D立方体制作请关注haodaima.com其它相关文章！
