纯CSS3属性实现静态3D立方体

看上去还像那么回事哈。话说这是第一次写这个，刚开始时感觉有点无从下手，不过最后还是完成了。哈哈，下面就先上源码：

css样式：

/外框架，便于整体移动/
.d{position:relative;}
.d1,.d2,.d3,.d4,.d5,.d6{width:100px;height:100px;color:#000;background-color:#010108;position:absolute;text-align:center;line-height:100px;}
/正面(d1)与背面(d3)/
.d1{left:100px;top:100px;opacity:.5;z-index:10;color:#f00;}
.d3{left:150px;top:50px;width:99px;height:99px;line-height:120px;border:1px dashed #000;border-width:0 0 1px 1px;background-color:#666;opacity:.5;z-index:8}
/右侧面(d2)与左侧面(d4)/
.d2{left:200px;background-color:#8D8181;z-index:9;}
.d4{left:100px;background-color:#f00;z-index:7;}
.d2,.d4{top:100px;width:50px;opacity:.5;-webkit-transform: skew(0deg,-45deg);-webkit-transform-origin:0px 0px;transform: skew(0deg,-45deg);transform-origin:0px 0px}
/上面(d5)与下面(d6)/
.d5{top:50px;z-index:11;background-color:#B9B6B6;opacity:.8;}
.d6{top:150px;z-index:6;width:99px;border-left:1px dashed #000;background-color:transparent;}
.d5,.d6{left:100px;height:50px;line-height:50px;-webkit-transform:skewX(-45deg);-webkit-transform-origin:0 100%;transform:skewX(-45deg);transform-origin:0 100%}
html内容：

　

d1

　

d2

　

d3

　

d4

　

d5

　

d6

提示：CSS3属性不兼容ie9-，请使用非ie内核浏览器浏览效果

点此下载→→【代码】纯CSS3属性实现静态3D立方体.zip　　

下面来说说自己的实现思路与方法。（以下观点仅代表个人，不代表大众）

学过数学的我们都知道立方体有6个面，那么我们可以用6个div来表示6个面，这个也是最初级的写法了。对于6个面，这里分别用d1-d6来表示（正面：d1；背面d3；右侧面：d2；左侧面：d4；上面：d5；下面：d6）。由于视角不同，效果图也会不同。对于图中的效果完全是洒家构思的，目的是为了方便实现，并未做精确的角度测量与长度的变化。

仔细看6个面可以分为3组，即正面与背面;两个侧面。下两个面;这样一来的话我们只需要写出d1;d2;d5这三个面的样式，然后d3;d4;d6复制其样式并进行位置上的偏移即可快速实现效果。下面d1就没有什么好说的了，对于d2与d5需要说一下。d2和d5都是一个平行四边形，这里不需要用HTML5中高大上的“canvas”，只需要用到“CSS3”中的一个“skewX”与一个“transform-origin”即可。前者是“斜切”后者是“初始位置坐标”，怎么样，是不是跟ps中的很像。这里都是以45度表示的，亲们在写时可根据不同角度来修改数值哈。

好了，思路与解法都已经介绍完毕，对刚提及的两个CSS3属性不懂的可以点此手册下载→→《CSS 3.0（飘零雾雨版）》后查看哈。
东莞网站建设www.zg886.cn