无需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网页布局开发时的常见问题小结

一、有疑问，先验证 　　在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。　　在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而>>>详细阅读

本文标题：CSS 3D立方体制作

地址：http://www.17bianji.com/kaifa2/CSS/16696.html

 1/2    1