妙用伪对象实现3D立方体

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-07-01 15:06:32　-　阅:　-　评:2　-　积分:0

前几天发表了2篇关于“3D立方体”的制作方法，两种方法都各有不同。一种是用6个div，效果更加逼真，但不兼容ie；一种是仅用了5个div，利用边框来构造立方体，兼容性更好。今天再来介绍第三种方法，即：妙用伪对象实现3D立方体。

虽然说现在很多网站中都用了伪对象，但如实说，洒家在日常并没有怎么用过伪对象。原因是考虑到要兼容坑爹的ie6,其实我真的很想不明白，到底是哪些神人还在用破ie6。不过话又说回来，写网页考虑兼容ie6还是有好处的，起码可以规范我们的代码，以及我们可以掌握更多的兼容性问题。一般在网页中，洒家喜欢使用css3中的过渡效果，虽然在低版本ie中不支持，但可以使用jq。好了，还是来看看伪对象是如何实现的吧，附源码：

<!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>妙用伪对象实现3D立方体---艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="妙用伪类实现3D立方体,纯CSS3属性实现静态3D立方体,巧用边框构造3D立方体,:before,:after,content">
<style type="text/css">
*{margin:0;padding:0;}
/*外框架，便于整体移动*/
.d{position:relative; top:200px;left:400px;}
.d1,.d3{width:100px;height:100px;color:#000;background-color:#010108;position:absolute;text-align:center;line-height:100px;}
/*正面(d1),右侧面(:before)与左侧面(:after)*/
.d1{left:100px;top:100px;opacity:.5;z-index:10;color:#f00;}
.d1:before,.d1:after{content:"";position:absolute;top:0;width:50px;height:100px;opacity:.5;-webkit-transform: skew(0deg,-45deg);-webkit-transform-origin:0px 0px;transform: skew(0deg,-45deg);transform-origin:0px 0px}
.d1:after{left:100px;background-color:#8D8181;z-index:9;}
.d1:before{left:0;background-color:#f00;z-index:7;}
/*背面(d3),上面(:before)与下面(:after)*/
.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}
.d3:before{top:0;z-index:11;background-color:#B9B6B6;opacity:.8;}
.d3:after{top:100px;z-index:6;width:99px;border-left:1px dashed #000;background-color:transparent;}
.d3:before,.d3:after{content:"";position:absolute;left:-50px;width: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="d3">d3</div>
</div>
</body>
</html>

上述源码的效果图如下，

怎么样，是不是很神奇。查看源码可以发现只用了“2”个div，你惊呆了吗？这就是伪对象的强大功能。伪对象可以帮我们省去很多代码，当然缺点就是不兼容低版本ie了。

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

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