CSS3打造3D導(dǎo)航

mochixuan 發(fā)布于2019-08-28 18:21 / 2965人閱讀

摘要：分析代碼如下標(biāo)簽里包裹一個盒子里包裹兩個，為效果的前后面做準(zhǔn)備。分析外觀定位代碼如下效果首先創(chuàng)造環(huán)境，保留空間在的時候，我們讓旋轉(zhuǎn)，正面面對我們的元素向上翻轉(zhuǎn)，下面有元素翻轉(zhuǎn)上來，并且在翻轉(zhuǎn)時有一個凸出來的效果。

效果預(yù)覽

分析：可以看出hover的時候是有前后兩個面的翻轉(zhuǎn)，并且有一個凸出效果。

HTML分析

代碼如下：

標(biāo)簽里包裹一個盒子里包裹兩個，為效果的前后面做準(zhǔn)備。

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效果

首先創(chuàng)造3D環(huán)境，保留3D空間：

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

1.在three-d:hover的時候，我們讓.three-d-box旋轉(zhuǎn)，正面面對我們的元素向上翻轉(zhuǎn)，下面有元素翻轉(zhuǎn)上來，并且在翻轉(zhuǎn)時有一個凸出來的效果。
2.關(guān)于這個凸出的效果，大家可以進(jìn)行測試，如果一個元素是以自己的中心為中心點(diǎn)進(jìn)行翻轉(zhuǎn)時，是不會有凸出的效果。所以如果要制造一個凸出的效果，那么元素翻轉(zhuǎn)的中心就一定不是自己的中心。
3.同時我們看到，在翻轉(zhuǎn)的同時，元素貼回了ul所在的平面的，因此應(yīng)該是在Z軸上有一定負(fù)的位移。

根據(jù)以上3點(diǎn)，我們可以設(shè)置3D變換：

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

在這里，我先設(shè)置translateZ而不是rotateX，是因?yàn)?b>rotateX之后坐標(biāo)軸會變換，如果先roatetX后translateZ的話，Z軸的位移就不是垂直于ul平面（面對我們）的位移了。

由于變換時，.three-d-box有Z軸上的負(fù)位移，如果不給.front,.back設(shè)置Z軸上的位移的話，這兩個平面最后不會貼回ul的平面，而是在ul平面的后面。因此，我們給.front,.back設(shè)置Z軸正方向且等于變化時的位移的距離，如此，變化時，這兩個元素就會完美貼合ul所在的平面了。

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

變換時，.back是從下面上來的，理應(yīng)有一個rotateX(-90deg)的旋轉(zhuǎn)。如果先translateZ再rotateX的話，.back所在的Y軸上的高度是的一半，動畫時并沒有從下面上來的效果，因此，應(yīng)該先rotateX變化坐標(biāo)后再translateZ，這樣.back就在ul的“下方”了。

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

在沒有hover的情況下，由于給.front,.back設(shè)置了translateZ，.front,.back看起來比正常的大。為了在沒有hover的情況下，.front能貼合，我給.three-d設(shè)置translateZ(-50px)，這樣.front雖然先跟隨.three-d在Z軸上有-50px的負(fù)位移，但隨后translateZ(50px)又讓它在Z軸上有50px的正位移，如此，便貼合了.
.three-d-box{transform:translateZ(-50px);}

最后，我們?yōu)檫@個變化添加一個過渡的效果：
.three-d-box{transition:all .3s;}

3.注意

為了讓效果明顯，Z軸上的位移設(shè)置的較大值50px;在了解原理后，大家可以設(shè)置小一點(diǎn)的位移值，這樣下方的.back就不會如此明顯的看到了。

hover的時候，.three-d-box旋轉(zhuǎn)，它的子元素旋轉(zhuǎn)的中心點(diǎn)是.three-d-box的中心點(diǎn)而不是子元素自己的中心點(diǎn)哦~這樣你才能看到有凸出的效果。

hover的時候是會覆蓋原來的樣式，所以hover時，原始狀態(tài)是.three-d-box在Z軸的位移是0，.front,.back在Z軸的位移是50px;hover的時候以此為起點(diǎn)進(jìn)行變換。

最終3D相關(guān)代碼如下：

.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);
}

總結(jié)

這個例子很好的說明了，一定要注意變換的中心點(diǎn)。

父元素變換時，子元素是以父元素的中心點(diǎn)為中心點(diǎn)變換的，而不是自己。