【一、项目背景】

 

　　随着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属性。

 

　　3、创建CSS样式

 

　　方法说明：

 

　　rotateX（） 方法

 

　　通过 rotateX（） 方法，元素围绕其 X 轴以给定的度数进行旋转。

 

　　rotateY（） 旋转

 

　　通过 rotateY（） 方法，元素围绕其 Y 轴以给定的度数进行旋转。

 

　　rotateZ（） 旋转

 

　　通过 rotateZ（） 方法，元素围绕其 Z 轴以给定的度数进行旋转。

 

　　下表是部分属性所代表的含义：

 

　　4、运行一下看下效果；点击F12运行。

 

　　5、呈现的效果如下图所示。

 

　　可以看到效果基本上可以 ，可是鼠标移上去没有效果。

 

　　6、添加鼠标移上去缩放的效果

 

　　7、外层再添加一个3d立方体形成叠加效果

 

　　body代码：

 

　　CSS样式代码

 

　　【六、效果展示】

 

　　1、点击运行，效果如下图所示。

 

　　2、鼠标移到立方体上，缩放效果展示，如下图所示。

 

　　【七、总结】

 

　　1、整个效果写出来，还是比较简单的，只要明白各个命令的意思，剩下的就是组织一下逻辑而已。

 

　　2、欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

 

　　3、CSS样式的效果不止这些，还有更加炫酷的效果，值得大家去学习。

 

　　4、实现的方法3d立方体的方法有很多，但这是最简单的一种。