CSS3打造3D导航_html/css

分析：可以看出hover的时候是有前后两个面的翻转，并且有一个凸出效果。

代码如下：

 
 Home Home Home 
 
 Demo Demo Demo 
 
 Deal Deal Deal 
 
 About About About 

标签里包裹一个盒子里包裹两个，为效果的前后面做准备。

1.外观、定位

代码如下：

 *{ box-sizing:border-box;} .block-menu{background:black;} .block-menu li{display:inline-block;} .block-menu li a{ color:#fff; text-decoration:none; text-transform:uppercase; font-size:24px; line-height:20px; font-weight:bold; font-family: Arial, sans-serif; display:block; padding:15px 10px; } .three-d{ position:relative; } .three-d-box,.front,.back{ width:100%; height:100%; position:absolute; top:0; left:0; padding:15px 10px; background:black; }

2.3D效果

首先创造3D环境，保留3D空间：

.three-d{perspective:200px;}.three-d-box{transform-style:preserve-3d;}

1.在three-d:hover的时候，我们让.three-d-box旋转，正面面对我们的元素向上翻转，下面有元素翻转上来，并且在翻转时有一个凸出来的效果。
2.关于这个凸出的效果，大家可以进行测试，如果一个元素是以自己的中心为中心点进行翻转时，是不会有凸出的效果。所以如果要制造一个凸出的效果，那么元素翻转的中心就一定不是自己的中心。
3.同时我们看到，在翻转的同时，元素贴回了ul所在的平面的，因此应该是在Z轴上有一定负的位移。

根据以上3点，我们可以设置3D变换：

.three-d:hover .three-d-box{ transform:translateZ(-50px) rotateX(90deg);}

在这里，我先设置translateZ而不是rotateX，是因为rotateX之后坐标轴会变换，如果先roatetX后translateZ的话，Z轴的位移就不是垂直于ul平面（面对我们）的位移了。

由于变换时，.three-d-box有Z轴上的负位移，如果不给.front,.back设置Z轴上的位移的话，这两个平面最后不会贴回ul的平面，而是在ul平面的后面。因此，我们给.front,.back设置Z轴正方向且等于变化时的位移的距离，如此，变化时，这两个元素就会完美贴合ul所在的平面了。

.front,.back{transform:translateZ(50px);}

变换时，.back是从下面上来的，理应有一个rotateX(-90deg)的旋转。如果先translateZ再rotateX的话，.back所在的Y轴上的高度是的一半，动画时并没有从下面上来的效果，因此，应该先rotateX变化坐标后再translateZ，这样.back就在ul的“下方”了。

.front{transform:rotateX(0deg) translateZ(50px);}.back{transform:rotateX(-90deg) translateZ(50px);}

在没有hover的情况下，由于给.front,.back设置了translateZ，.front,.back看起来比正常的大。为了在没有hover的情况下，.front能贴合，我给.three-d设置translateZ(-50px)，这样.front虽然先跟随.three-d在Z轴上有-50px的负位移，但随后translateZ(50px)又让它在Z轴上有50px的正位移，如此，便贴合了.
.three-d-box{transform:translateZ(-50px);}

最后，我们为这个变化添加一个过渡的效果：
.three-d-box{transition:all .3s;}

3.注意

最终3D相关代码如下：

.three-d{perspective:200px;}.three-d-box{ transform-style:preserve-3d; transform:translateZ(-25px); transition: all .3s ; }.front{transform:rotateX(0deg) translateZ(25px);}.back{transform:rotateX(-90deg) translateZ(25px);}.three-d:hover .three-d-box{ transform: translateZ(-25px) rotateX(90deg);}