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.注意

1. 爲了讓效果明顯，Z軸上的位移設置的較大值50px;在瞭解原理後，你們能夠設置小一點的位移值，這樣下方的.back就不會如此明顯的看到了。

2. hover的時候，.three-d-box旋轉，它的子元素旋轉的中心點是.three-d-box的中心點而不是子元素本身的中心點哦~這樣你才能看到有凸出的效果。

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

總結

1. 這個例子很好的說明了，必定要注意變換的中心點。

2. 父元素變換時，子元素是以父元素的中心點爲中心點變換的，而不是本身。