【一、项目背景】
随着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 轴以给定的度数进行旋转。
下表是部分属性所代表的含义：
属性含义width定义宽度height定义高度margin： auto位置居中transform向元素应用 2d 或 3d 转换transform－origin允许你改变被转换元素的位置。transform－style规定被嵌套元素如何在 3d 空间中显示perspective规定 3d 元素的透视效果perspective－origin规定 3d 元素的底部位置backface－visibility定义元素在不面对屏幕时是否可见
4、运行一下看下效果；点击f12运行。
5、呈现的效果如下图所示。
可以看到效果基本上可以 ，可是鼠标移上去没有效果。
6、添加鼠标移上去缩放的效果．box：hover｛ transform： rotatex（300deg） rotatez（300deg） rotatey（－300deg） scale（0．5）；
｝ ＃ scale是缩放倍数
7、外层再添加一个3d立方体形成叠加效果
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立方体的方法有很多，但这是最简单的一种。
Python进阶学习交流
