CSS實現3D切換效果

時間 2019-11-08

標籤 css 實現 3d 切換效果欄目 CSS 简体版

原文原文鏈接

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

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/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 0.5s linear;
        }
        div#front{
            background-color: blue;
        }
        div#back{
            background-color:yellow;
            transform: rotateY(180deg);
        }
        div#outer:hover div#front{
            transform: rotateY(-180deg);
        }
        div#outer:hover div#back{
            transform: rotateY(0deg);
        }


    </style>
</head>
<body>
    <div id="outer">
        <div id="front">front</div>
        <div id="back">back</div>
    </div>
</body>
</html>

另外一個版本，無限循環的，改變相應的CSS便可css3

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的的做用，這個我後面會解釋。
解釋一下：web

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

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

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

若是設置backface-visibility:hidden;的話，那麼上圖再多旋轉20度，就看不見啦！爲何呢？由於咱們設置背面是不顯示的，因此該元素在rotateY(90deg)到rotateY(270deg)這個區間(至關於該元素不以正面示人，喜歡後入XD)，是不可見的！測試

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

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

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

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

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

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