CSS實現3D切換效果

djfml 發布于2019-08-30 13:05 / 1342人閱讀

摘要：譬如設置值為，相對于，則元素的變形較弱一些。經過測試，其視覺效果和是一樣，相當于從無限遠處平面超長焦觀察這個動畫。其作用是當旋轉過正面，設置是否顯示其背面。

先上效果圖和代碼吧
鼠標懸浮上去，藍色的front面開始旋轉

藍色的front面轉過90°時，黃色的back面會顯現出來，




    
    


    
        front
        back

另一個版本，無限循環的，改變相應的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);
            }
        }

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

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

關于backface-visibility這個屬性。其作用是當3D旋轉過正面，設置是否顯示其背面。光文字是不清楚，看圖！！下面兩圖可以對比一下。
(沒有設置backface-visibility:hidden，transform:rotateY(120deg);時的效果)

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

如果設置backface-visibility:hidden;的話，那么上圖再多旋轉20度，就看不見啦！為什么呢？因為我們設置背面是不顯示的，所以該元素在rotateY(90deg)到rotateY(270deg)這個區間(相當于該元素不以正面示人，喜歡后入XD)，是不可見的！

掌握了這兩點，結合我們已經很熟悉的transform:rotateY,就很容易做出所要的效果了！！

首先在父元素上設置perspective和position:relative,為3D視角和子元素絕對定位做準備！

之后要在父元素內部設置和父元素大小相同的兩個子元素，一個正面示人，一個則留下寂寞的背影！放心，等會匯給你展示的機會！

問題來了，怎么在同一時間只顯示一個元素呢？如何做到轉過90度時，將正面元素隱藏，開始顯示背面元素呢？這位觀眾，你想到解決方案了嗎？

沒錯！就是利用我們之前提到的backface-visibility屬性！設置兩個元素的該屬性為hidden，后背元素的初始值為180deg,記得我們之前說過設置backface-visibility:hidden的元素旋轉到90度到270度區間，元素不可見嗎？正好用在這里，使用這個屬性，達到了隱藏第二個元素的效果。

之后就是播放動畫了，我們讓正面元素在hover時旋轉180度，同時讓背面元素也向同樣方向旋轉180度。

當兩個元素都旋轉90度時，amazing happens!正面元素不可見了，在本例中是默認的0度旋轉到了-90度；但同時，背面元素顯露出來了，從初始的180度減小到了90度，進入了能顯示的區間！兩個元素完成了接力！

結語：
CSS的3D變換還有很多花樣，繼續探索！

GPU云服務器云服務器 js如何實現3d效果 css3d 切換效果圖片切換效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115292.html

CSS實現3D切換效果

摘要：譬如設置值為，相對于，則元素的變形較弱一些。經過測試，其視覺效果和是一樣，相當于從無限遠處平面超長焦觀察這個動畫。其作用是當旋轉過正面，設置是否顯示其背面。先上效果圖和代碼吧鼠標懸浮上去，藍色的front面開始旋轉 showImg(https://segmentfault.com/img/bVxLN9); 藍色的front面轉過90°時，黃色的back面會顯現出來， showImg(...

QiShare 2019-08-02 15:55 評論0 收藏0
CSS動畫之旋轉魔方輪播

摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

leone 2019-08-29 15:10 評論0 收藏0
CSS動畫之旋轉魔方輪播

摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

LittleLiByte 2019-08-02 10:18 評論0 收藏0
年終活動h5動畫總結

摘要：年終活動動畫總結戳這里采用的插件，即可滿足大多數，手機的兼容性問題。人移動切換，添加類控制移動和暫停，以及切換背景人物。監聽動畫結束時機橋的出現配合屬性實現。不添加會影響自身頁數的判斷動畫總結別人寫的真牛自己只會。年終活動h5動畫總結戳這里----♂--github-- css3 + react-id-swiper + react + redux + saga 采用postcss...

betacat 2019-08-23 16:49 評論0 收藏0