这是一篇讲述如何使用CSS来实现3D立方体的文章，原文地址：http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/

最近WEB 3D的概念越来越火了，各种解决方案层出不穷，在Flash Player平台上，就有众多的解决方案（Papervision 3D，Aways 3D，Alternativa3D等等），而最近Google又推出了O3D的API（关于Google 3D API的相关文章大家可以参考《RIAMeeting RIA行业资讯报道》第七期的Google O3DAPI：开发WEB3D的API 一文）。当然这些3D的实现都是需要基于浏览器到插件来实现的（或者是Flash Player，或者是Google 3D浏览器插件），今天我们要介绍给大家的是另外一种思路，即基于浏览器中的CSS来实现简单的3D变换效果。

其中的原理是使用了CSS中专有的3D变换特性（注意这种特性并非所有浏览器都支持），使用这种技巧你就可以实现3D的立方体效果，而不需要使用 JavaScript，图像，画布或SVG。立方体的组合其实是由若干个变形的立方体面组合而成的。目前只有最新版本的Webkit与Gecko引擎的浏 览器支持这些特性，包括Firefox 3.5+中的“-moz-transform”，以及Safari 3.2+中的“-webkit-transform”。

来看两个简单的示例：

1. 一个使用CSS实现的3D立方体
   支持浏览器： Safari 3.2+, Google Chrome, Firefox 3.5+
2. 在不使用JavaScript的情况下实现多面的立方体
   支持浏览器：Safari 4+, Google Chrome

注意CSS中关于3D部分的定义类似于下面的语句：

     .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;
    }

完整的代码以及示例请浏览：

http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/