成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

mochixuan / 2967人閱讀

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

效果預(yù)覽


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

HTML分析

代碼如下：

標(biāo)簽里包裹一個(gè)盒子里包裹兩個(gè)，為效果的前后面做準(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的時(shí)候，我們讓.three-d-box旋轉(zhuǎn)，正面面對(duì)我們的元素向上翻轉(zhuǎn)，下面有元素翻轉(zhuǎn)上來(lái)，并且在翻轉(zhuǎn)時(shí)有一個(gè)凸出來(lái)的效果。
2.關(guān)于這個(gè)凸出的效果，大家可以進(jìn)行測(cè)試，如果一個(gè)元素是以自己的中心為中心點(diǎn)進(jìn)行翻轉(zhuǎn)時(shí)，是不會(huì)有凸出的效果。所以如果要制造一個(gè)凸出的效果，那么元素翻轉(zhuǎn)的中心就一定不是自己的中心。
3.同時(shí)我們看到，在翻轉(zhuǎn)的同時(shí)，元素貼回了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)軸會(huì)變換，如果先roatetX后translateZ的話，Z軸的位移就不是垂直于ul平面（面對(duì)我們）的位移了。

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

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

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

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

在沒(méi)有hover的情況下，由于給.front,.back設(shè)置了translateZ，.front,.back看起來(lái)比正常的大。為了在沒(méi)有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)檫@個(gè)變化添加一個(gè)過(guò)渡的效果：
.three-d-box{transition:all .3s;}

3.注意

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

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

hover的時(shí)候是會(huì)覆蓋原來(lái)的樣式，所以hover時(shí)，原始狀態(tài)是.three-d-box在Z軸的位移是0，.front,.back在Z軸的位移是50px;hover的時(shí)候以此為起點(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é)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111187.html

相關(guān)文章

  • 3D全景漫游

    摘要：可選，默認(rèn)值為，設(shè)置為則禁止用戶和全景圖交互導(dǎo)航條不可用。可選，默認(rèn)值為，全景圖在毫秒后會(huì)自動(dòng)進(jìn)行動(dòng)畫。當(dāng)全景圖準(zhǔn)備就緒并且第一張圖片顯示時(shí)的回調(diào)函數(shù)。 3D全景漫游 showImg(http://mmbiz.qpic.cn/mmbiz/cibketMByvrbpDqUQ9LiaBvutnwMehicnO2RZurdl96FLtwqlf6LjWS0Bv8ApQY0YjHdtyFWuzz...

    DesGemini 評(píng)論0 收藏0

  • H5打造3d場(chǎng)景不完全攻略（二）: Amazing CSS3D

    摘要：實(shí)現(xiàn)方法可參考這篇文章純打造的模型渲染器實(shí)現(xiàn)全景。天空盒子相信很多打造過(guò)或有了解過(guò)全景的同行們都知道這個(gè)概念。首先將創(chuàng)建好的六個(gè)面切割出來(lái)，以命名標(biāo)記位置。柱形柱形全景也不算復(fù)雜。 前言 對(duì)的，本文就是著重介紹如何使用CSS3中的3D變換打造出H5中的3D效果。靈感來(lái)源于造物節(jié)團(tuán)隊(duì)的3d引擎，因?yàn)槭褂梅椒ū容^復(fù)雜，也沒(méi)有開(kāi)源的API文檔，于是想自己另外造個(gè)輪子，便開(kāi)始了相關(guān)內(nèi)容的學(xué)習(xí)和...

    fancyLuo 評(píng)論0 收藏0

  • 打造最美HTML5 3D機(jī)房（第二季）

    摘要：寫在前面的前面現(xiàn)在拍電影搞真人秀都流行拍續(xù)集，哥今天給大家?guī)?lái)的是打造最美機(jī)房的續(xù)集，哥的目標(biāo)是成為機(jī)房界的網(wǎng)紅。機(jī)柜標(biāo)簽機(jī)房中最重要的物理資源機(jī)柜是機(jī)房管理規(guī)劃監(jiān)控人員最關(guān)注的對(duì)象之一。 寫在前面的前面 現(xiàn)在拍電影、搞真人秀都流行拍續(xù)集，哥今天給大家?guī)?lái)的是打造最美3D機(jī)房的續(xù)集，哥的目標(biāo)是成為3D機(jī)房界的網(wǎng)紅。 -------------------------------我是這個(gè)...

    BetaRabbit 評(píng)論0 收藏0

  • 打造最美HTML5 3D機(jī)房（第二季）

    摘要：寫在前面的前面現(xiàn)在拍電影搞真人秀都流行拍續(xù)集，哥今天給大家?guī)?lái)的是打造最美機(jī)房的續(xù)集，哥的目標(biāo)是成為機(jī)房界的網(wǎng)紅。機(jī)柜標(biāo)簽機(jī)房中最重要的物理資源機(jī)柜是機(jī)房管理規(guī)劃監(jiān)控人員最關(guān)注的對(duì)象之一。 寫在前面的前面 現(xiàn)在拍電影、搞真人秀都流行拍續(xù)集，哥今天給大家?guī)?lái)的是打造最美3D機(jī)房的續(xù)集，哥的目標(biāo)是成為3D機(jī)房界的網(wǎng)紅。 -------------------------------我是這個(gè)...

    xiaokai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

mochixuan

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<