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

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-06-26 16:06:06　-　阅:　-　评:0　-　积分:0

昨日闲时用纯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内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3属性实现静态3D立方体---艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="纯CSS3属性实现静态3D立方体,巧用边框实现3D立方体,妙用伪类实现3D立方体,skewX,transform-origin">
<style type="text/css">
*{margin:0;padding:0;}
.d{position:relative; top:200px;left:400px;}
.d1,.d2,.d3,.d4,.d5,.d6{width:100px;height:100px;color:#000;background-color:#010108;position:absolute;text-align:center;line-height:100px;}
.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{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{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%}
</style>
</head>
<body>
<!--d是外框架，便于整体移动-->
<div class="d">
　<div class="d1">d1</div>
　<div class="d2">d2</div>
　<div class="d3">d3</div>
　<div class="d4">d4</div>
　<div class="d5">d5</div>
　<div class="d6">d6</div>
</div>
<p>提示：CSS3属性不兼容ie9-，请使用非ie内核浏览器浏览效果</p>
</body>
</html>

点此下载→→【代码】纯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（飘零雾雨版）》后查看哈。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/css3/2014-06-26/167.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！