CSS 3D立方体制作

前端  /  管理员 发布于 7年前   138

无需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; }