无需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立方体制作】相关文章：