CSS3打造3D导航

效果预览

分析：可以看出

hover

的时候是有前后两个面的翻转，并且有一个凸出效果。

HTML分析

代码如下：

<ul class="block-menu">
<li>
<a href="#" class="three-d">
Home            <span class="three-d-box">
<span class="front">Home</span>
<span class="back">Home</span>
</span>
</a>
</li>

<li>
<a href="#" class="three-d">
Demo            <span class="three-d-box">
<span class="front">Demo</span>
<span class="back">Demo</span>
</span>
</a>
</li>

<li>
<a href="#" class="three-d">
Deal            <span class="three-d-box">
<span class="front">Deal</span>
<span class="back">Deal</span>
</span>
</a>
</li>

<li>
<a href="#" class="three-d">
About            <span class="three-d-box">
<span class="front">About</span>
<span class="back">About</span>
</span>
</a>
</li></ul>

<a>

标签里包裹一个

<span>

盒子里包裹两个

<span>

，为效果的前后面做准备。

CSS分析

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轴上的高度是

<a>

的一半，动画时并没有从下面上来的效果，因此，应该先

rotateX

变化坐标后再

translateZ

，这样

.back

就在ul的“下方”了。

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

在没有

hover

的情况下，由于给

.front

,

.back

设置了

translateZ

，

.front

,

.back

看起来比正常的

<a>

大。为了在没有

hover

的情况下，

.front

能贴合

<a>

，我给

.three-d

设置

translateZ(-50px)

，这样

.front

虽然先跟随

.three-d

在Z轴上有-50px的负位移，但随后

translateZ(50px)

又让它在Z轴上有50px的正位移，如此，便贴合了

<a>

.

.three-d-box{transform:translateZ(-50px);}

最后，我们为这个变化添加一个过渡的效果：

.three-d-box{transition:all .3s;}

3.注意

为了让效果明显，Z轴上的位移设置的较大值50px;在了解原理后，大家可以设置小一点的位移值，这样下方的

.back

就不会如此明显的看到了。

hover

的时候，

.three-d-box

旋转，它的子元素旋转的中心点是

.three-d-box

的中心点而不是子元素自己的中心点哦~这样你才能看到有凸出的效果。

hover

的时候是会覆盖原来的样式，所以

hover

时，原始状态是

.three-d-box

在Z轴的位移是0，

.front

,

.back

在Z轴的位移是50px;

hover

的时候以此为起点进行变换。

最终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);}

总结

这个例子很好的说明了，一定要注意变换的中心点。

父元素变换时，子元素是以父元素的中心点为中心点变换的，而不是自己。