国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS實(shí)現(xiàn)3D切換效果

djfml / 1358人閱讀

摘要：譬如設(shè)置值為，相對(duì)于，則元素的變形較弱一些。經(jīng)過(guò)測(cè)試，其視覺(jué)效果和是一樣，相當(dāng)于從無(wú)限遠(yuǎn)處平面超長(zhǎng)焦觀察這個(gè)動(dòng)畫(huà)。其作用是當(dāng)旋轉(zhuǎn)過(guò)正面，設(shè)置是否顯示其背面。

先上效果圖和代碼吧
鼠標(biāo)懸浮上去，藍(lán)色的front面開(kāi)始旋轉(zhuǎn)

藍(lán)色的front面轉(zhuǎn)過(guò)90°時(shí)，黃色的back面會(huì)顯現(xiàn)出來(lái)，




    
    


    

        
front

        
back

另一個(gè)版本，無(wú)限循環(huán)的，改變相應(yīng)的CSS即可

        div#outer{
            width: 200px;
            height: 200px;
            position: relative;
            perspective: 300px;
            margin:100px auto;
        }
        div#front, div#back{
            position: absolute;
            width: 200px;
            height: 200px;
            backface-visibility: hidden;
            transition: transform 4s linear;
        }
        div#front{
            background-color: blue;
        }
        div#outer:hover div#front{
            -webkit-animation: rotateFront 12s linear infinite;
            -o-animation: rotateFront 12s linear infinite;
            animation: rotateFront 12s linear infinite;
        }
        div#back{
            background-color:yellow;
            transform: rotateY(180deg);
        }
        div#outer:hover div#back{
            -webkit-animation: rotateBack 12s linear infinite;
            -o-animation: rotateBack 12s linear infinite;
            animation: rotateBack 12s linear infinite;
        }
        @keyframes rotateFront{
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(-360deg);
            }
        }
        @keyframes rotateBack{
            0%{
                transform: rotateY(180deg);
            }
            100%{
                transform: rotateY(-180deg);
            }
        }

推薦一下這篇文章.但大神有個(gè)地方說(shuō)得不對(duì)，即backface-visibility的的作用，這個(gè)我后面會(huì)解釋。
解釋一下：

3D效果的條件：得在父元素上設(shè)置perspective:XXXpx,這個(gè)數(shù)字可以大致理解為相機(jī)鏡頭的焦距，"焦距"越短(對(duì)應(yīng)perspective數(shù)字越小),則變形效果越明顯。譬如設(shè)置值為300px，相對(duì)于100px，則元素的變形較弱一些。如果沒(méi)有設(shè)置該屬性，那么3D變換將被限制在瀏覽器的二維平面上,只有簡(jiǎn)單的伸縮，如圖所示。經(jīng)過(guò)測(cè)試，其視覺(jué)效果和perspective:9999em是一樣，相當(dāng)于從無(wú)限遠(yuǎn)處平面（超長(zhǎng)焦）觀察這個(gè)3D動(dòng)畫(huà)。

關(guān)于backface-visibility這個(gè)屬性。其作用是當(dāng)3D旋轉(zhuǎn)過(guò)正面，設(shè)置是否顯示其背面。光文字是不清楚，看圖！！下面兩圖可以對(duì)比一下。
(沒(méi)有設(shè)置backface-visibility:hidden，transform:rotateY(120deg);時(shí)的效果)

(transform:rotateY(70deg);的效果)

如果設(shè)置backface-visibility:hidden;的話，那么上圖再多旋轉(zhuǎn)20度，就看不見(jiàn)啦！為什么呢？因?yàn)槲覀冊(cè)O(shè)置背面是不顯示的，所以該元素在rotateY(90deg)到rotateY(270deg)這個(gè)區(qū)間(相當(dāng)于該元素不以正面示人，喜歡后入XD)，是不可見(jiàn)的！

掌握了這兩點(diǎn)，結(jié)合我們已經(jīng)很熟悉的transform:rotateY,就很容易做出所要的效果了??！

首先在父元素上設(shè)置perspective和position:relative,為3D視角和子元素絕對(duì)定位做準(zhǔn)備！

之后要在父元素內(nèi)部設(shè)置和父元素大小相同的兩個(gè)子元素，一個(gè)正面示人，一個(gè)則留下寂寞的背影！放心，等會(huì)匯給你展示的機(jī)會(huì)！

問(wèn)題來(lái)了，怎么在同一時(shí)間只顯示一個(gè)元素呢？如何做到轉(zhuǎn)過(guò)90度時(shí)，將正面元素隱藏，開(kāi)始顯示背面元素呢？這位觀眾，你想到解決方案了嗎？

沒(méi)錯(cuò)！就是利用我們之前提到的backface-visibility屬性！設(shè)置兩個(gè)元素的該屬性為hidden，后背元素的初始值為180deg,記得我們之前說(shuō)過(guò)設(shè)置backface-visibility:hidden的元素旋轉(zhuǎn)到90度到270度區(qū)間，元素不可見(jiàn)嗎？正好用在這里，使用這個(gè)屬性，達(dá)到了隱藏第二個(gè)元素的效果。

之后就是播放動(dòng)畫(huà)了，我們讓正面元素在hover時(shí)旋轉(zhuǎn)180度，同時(shí)讓背面元素也向同樣方向旋轉(zhuǎn)180度。

當(dāng)兩個(gè)元素都旋轉(zhuǎn)90度時(shí)，amazing happens!正面元素不可見(jiàn)了，在本例中是默認(rèn)的0度旋轉(zhuǎn)到了-90度；但同時(shí)，背面元素顯露出來(lái)了，從初始的180度減小到了90度，進(jìn)入了能顯示的區(qū)間！兩個(gè)元素完成了接力！

結(jié)語(yǔ)：
CSS的3D變換還有很多花樣，繼續(xù)探索！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115292.html

相關(guān)文章

  • CSS實(shí)現(xiàn)3D切換效果

    摘要：譬如設(shè)置值為，相對(duì)于，則元素的變形較弱一些。經(jīng)過(guò)測(cè)試，其視覺(jué)效果和是一樣，相當(dāng)于從無(wú)限遠(yuǎn)處平面超長(zhǎng)焦觀察這個(gè)動(dòng)畫(huà)。其作用是當(dāng)旋轉(zhuǎn)過(guò)正面，設(shè)置是否顯示其背面。 先上效果圖和代碼吧鼠標(biāo)懸浮上去，藍(lán)色的front面開(kāi)始旋轉(zhuǎn) showImg(https://segmentfault.com/img/bVxLN9); 藍(lán)色的front面轉(zhuǎn)過(guò)90°時(shí)，黃色的back面會(huì)顯現(xiàn)出來(lái)， showImg(...

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

  • CSS動(dòng)畫(huà)之旋轉(zhuǎn)魔方輪播

    摘要：關(guān)于的詳細(xì)講解張?chǎng)涡褚粋€(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來(lái)實(shí)現(xiàn)。寫(xiě)完這篇文章后確實(shí)感覺(jué)自己對(duì)方面的知識(shí)又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識(shí)嘞本文參考內(nèi)容關(guān)于的詳細(xì)講解張?chǎng)涡裨斀鈴氐桌斫夂偷膮^(qū)別的原始出處 很久沒(méi)有回頭來(lái)復(fù)習(xí)CSS方面的知識(shí)了, 正好又到了月底寫(xiě)文章的deadline......所以這次選擇了詳細(xì)鞏固一下CSS3動(dòng)畫(huà)有關(guān)的知識(shí)點(diǎn),因?yàn)橹爸皇怯眠^(guò)...

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

  • CSS動(dòng)畫(huà)之旋轉(zhuǎn)魔方輪播

    摘要：關(guān)于的詳細(xì)講解張?chǎng)涡褚粋€(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來(lái)實(shí)現(xiàn)。寫(xiě)完這篇文章后確實(shí)感覺(jué)自己對(duì)方面的知識(shí)又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識(shí)嘞本文參考內(nèi)容關(guān)于的詳細(xì)講解張?chǎng)涡裨斀鈴氐桌斫夂偷膮^(qū)別的原始出處 很久沒(méi)有回頭來(lái)復(fù)習(xí)CSS方面的知識(shí)了, 正好又到了月底寫(xiě)文章的deadline......所以這次選擇了詳細(xì)鞏固一下CSS3動(dòng)畫(huà)有關(guān)的知識(shí)點(diǎn),因?yàn)橹爸皇怯眠^(guò)...

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

  • 年終活動(dòng)h5動(dòng)畫(huà)總結(jié)

    摘要：年終活動(dòng)動(dòng)畫(huà)總結(jié)戳這里采用的插件，即可滿足大多數(shù)，手機(jī)的兼容性問(wèn)題。人移動(dòng)切換，添加類(lèi)控制移動(dòng)和暫停，以及切換背景人物。監(jiān)聽(tīng)動(dòng)畫(huà)結(jié)束時(shí)機(jī)橋的出現(xiàn)配合屬性實(shí)現(xiàn)。不添加會(huì)影響自身頁(yè)數(shù)的判斷動(dòng)畫(huà)總結(jié)別人寫(xiě)的真牛自己只會(huì)。 年終活動(dòng)h5動(dòng)畫(huà)總結(jié) 戳這里----♂--github-- css3 + react-id-swiper + react + redux + saga 采用postcss...

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

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

0條評(píng)論

閱讀需要支付1元查看
<