这个练习我是废了老大劲才弄懂了，看评论区很多人想要讲解，所以我就分享一下我的理解过程吧，当然我也是只是一个自学的小白啦，在很多地方可能理解不是很正确到位的，也希望大家能多多指点咯！
恩，这个练习真正的难点不在其特效有多么炫酷，而在于它的结构之精妙。
那么这个结构到底厉害在哪里呢？大家带着这个问题往下看，如果你明白了结构为什么这么写，那么就懂了这个练习的80%，因为css部分很简单！
关键点一：一级菜单里各个li标签的宽度是不一样的，用什么方法实现的，在参考代码里找出相应的css代码。
关键点二：HTML结构里的所有a标签有什么作用，为什么要加这个a标签。
如果要我只是看着效果，从零开始写这个结构，我肯定写不出来。为什么这么肯定？因为我真的自己写了一个结构。如果blog没有二级下拉菜单，我写的结构也算完成任务，不过这里没有如果。
跟原本的结构比较，我写的结构里没有那个class名为“three-d”的a标签。我想很多人都会写成我那个样子，因为从效果上看在一层不变的底色上又有一层可以翻动的盒子，谁会想到这两层之间还需要一层？
正是少了这层a标签，所以出现了这样一个bug，我们看答案里，blog下的二级菜单ul并没有设置display：none；但实际效果里却是看不到（这里看不到和隐藏是不一样的概念）的。而少了a标签后，那个二级菜单就会以一个透视的平面出现在blog里，而如果给二级菜单加上display：none；鼠标移入blog时，二级菜单出现的动效又会消失，因为隐藏与显示是一个非黑即白的属性，没有中间态。
那么参考代码是如何避免这个问题的呢？
关键就是perspective（对这个属性不懂的同学可以移步这里http://www.imooc.com/article/12754）这个透视属性了，我们知道这是一个设置在父元素上的属性，可以让子元素产生透视效果，在参考HTML结构里面li标签与three-d-box之间有a标签，而a标签并没有设置透视属性，所以二级菜单也就是整个ul不会产生透视效果，又由于二级菜单有rotateX（90deg）的属性，所以会以一个没有厚度的平面垂直于页面显示，所以我们就看不见它，但并不是这个二级菜单隐藏了。
而如果没有a标签，perspective就需要设置在li标签上，blog的二级菜单的直接父级元素就是一个li，所以就会产生透视效果，以一个变形的平面出现在blog下面。

接下来就是一级菜单里每个li宽度的问题了，如何让three-d-box与li的宽度相等，我们注意到three-d-box每个面的内容与li的文本部分是相同的，所以可以基于这点，利用文本的宽度再加上给li设置padding值达成随可以文本宽度变化自适应的宽度，li的子元素则设置宽度width：100%，来与li的宽度保持一致。

除了前面说的两个关键点，最后说一说那个翻转的盒子特效吧，课程本身没有教，第一次做还是要花点时间的，只要理解了那几个css3d的属性，其实很好实现。主要就是perspective属性与translateZ（）属性的理解链接描述，
还有需要注意的就是元素坐标轴会跟着rotate（）属性一起转动，当rotate（）与translateZ（）一起用的时候尤其要注意这点，因为这两个属性的位置是有先后之分的。具体可以点击这里链接描述，理解这些之后可以自己先用css写个立方体试试，很有意思的小实验，可以帮你跟深入的理解css3d的各个属性用法。这是我写的一个盒子：http://pan.baidu.com/s/1i5lrcNV 密码：qhyc

最后放上我写的这次练习的代码，去掉了背景图的部分，只是最基础的效果实现链接：http://pan.baidu.com/s/1pKYT3PD 密码：if9m

参考链接：
http://www.imooc.com/article/12670