随着HTML5 CSS3的涌现和发展，使得我们的网页可以实现更加繁芜的效果，也使得我们的浏览体验更加丰富，以是本日我们将制作一个正方体的3D效果。
【二、项目剖析】
想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分高下旁边和前后，考虑这些可以帮助我们更好的融入CSS3的代码。
因此我设置了6个div，作为立方体的6个面。由于定位的缘故原由，一开始所有的盒子都是面对着屏幕这面的，因此要授予每个面不一样的值，即不一样的位置它才能展现出来。
【三、须要的工具】
Adobe Dreamweaver
【四、项目目标】
实现3的l立方体旋转，鼠标移上去实现缩放效果。
【五、项目实现】
1、打开Adobe Dreamweaver，新建html文档。把标题改为“3d立方体”。
2、在body标签，创建一个div盒子 ，给它class属性，在外层div里面在创建6个div表示立方体的六个面，同样给它们 class属性。
<body> <div class="box"> <div class="box2"> <div class="box-2">top</div> <div class="box-2">btm</div> <div class="box-2">left</div> <div class="box-2">right</div> <div class="box-2">face</div> <div class="box-2">back</div> </div> </div></body>
3、创建CSS样式
<style type="text/css">.box { width: 200px; height: 200px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; transition: all 2s; transform-style: preserve-3d; transform: rotateX(15deg) rotateY(-15deg);}.box:hover { transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);}.box .box-2 { width: 100px; height: 100px; text-align: center; line-height: 100px; font-size: 1.2em; position: absolute; top: 0; left: 0;}.box .box-2:nth-child(1) { /小立方体第一壁/ background: rgba(225,0,0,0.5); transform: rotateX(90deg) translateZ(50px); #角度 偏移量}.box .box-2:nth-child(2) { /小立方体第二面/ background: rgba(255,255,0,0.5); transform: rotateX(-90deg) translateZ(50px);}.box .box-2:nth-child(3) { /小立方体第三面/ background: rgba(225,0,255,0.5); transform: rotateY(-90deg) translateZ(50px);}.box .box-2:nth-child(4) { /小立方体第四面/ background: rgba(0,255,0,0.5); transform: rotateY(90deg) translateZ(50px);}.box .box-2:nth-child(5) { /小立方体第五面/ background: rgba(225,0,0,0.5); transform: translateZ(50px);}.box .box-2:nth-child(6) { /小立方体第六面/ background: rgba(0,0,255,0.5); transform: rotateY(180deg) translateZ(50px);}</style> </head> <body> <div class="box"> <div class="box2"> <div class="box-2">top</div> <div class="box-2">btm</div> <div class="box-2">left</div> <div class="box-2">right</div> <div class="box-2">face</div> <div class="box-2">back</div> </div> </div></body></html>
方法解释：
rotateX() 方法通过 rotateX() 方法，元素环绕其 X 轴以给定的度数进行旋转。
rotateY() 旋转通过 rotateY() 方法，元素环绕其 Y 轴以给定的度数进行旋转。
rotateZ() 旋转通过 rotateZ() 方法，元素环绕其 Z 轴以给定的度数进行旋转。
下表是部分属性所代表的含义：
4、运行一下看下效果；点击F12运行。
5、呈现的效果如下图所示。
可以看到效果基本上可以 ，可是鼠标移上去没有效果。
6、添加鼠标移上去缩放的效果.box:hover{ transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5); } # scale是缩放倍数
body代码：
<div class="box"><div class="box-1">top</div><div class="box-1">btm</div><div class="box-1">left</div><div class="box-1">right</div><div class="box-1">face</div><div class="box-1">back</div></div>
CSS样式代码
<style type="text/css">.box .box-1{ width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 2em; position: absolute; top: 0; left: 0; } .box .box-1:nth-child(1){ /大立方体第一壁/ background: rgba(225,0,0,0.5); transform:rotateX(90deg) translateZ(100px); }.box .box-1:nth-child(2){ /大立方体第二面/ background: rgba(255,255,0,0.5); transform:rotateX(-90deg) translateZ(100px); }.box .box-1:nth-child(3){ /大立方体第三面/ background: rgba(225,0,255,0.5); transform:rotateY(-90deg) translateZ(100px); }.box .box-1:nth-child(4){ /大立方体第四面/ background: rgba(0,255,0,0.5); transform:rotateY(90deg) translateZ(100px); }.box .box-1:nth-child(5){ /大立方体第五面/ background: rgba(225,0,0,0.5); transform:translateZ(100px); }.box .box-1:nth-child(6){ /大立方体第六面/ background: rgba(0,0,255,0.5); transform:rotateY(180deg) translateZ(100px); }</style>
【六、效果展示】
1、点击运行，效果如下图所示。
2、鼠标移到立方体上，缩放效果展示，如下图所示。
【七、总结】
1、全体效果写出来，还是比较大略的，只要明白各个命令的意思，剩下的便是组织一下逻辑而已。
2、欢迎大家积极考试测验，有时候看到别人实现起来很大略，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。3、CSS样式的效果不止这些，还有更加炫酷的效果，值得大家去学习。4、实现的方法3d立方体的方法有很多，但这是最大略的一种。5、如果须要本文源码，请在"大众号后台回答“立方体”四个字获取。
看完本文有收成？请转发分享给更多的人
IT共享之家
入群请在微信后台回答【入群】
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/
