CSS3如何實現(xiàn)3D開門動畫效果

這篇文章將為大家詳細(xì)講解有關(guān)CSS3如何實現(xiàn)3D開門動畫效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。 這篇文章將為大家詳細(xì)講解有關(guān)CSS3如何實現(xiàn)3D開門動畫效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲

一、CSS3單門3D開門效果的實現(xiàn)

效果如下視頻：

配上開門的音效效果更棒！

您可以狠狠地點擊這里：CSS3 3d變換實現(xiàn)帶音效的的單門開門效果demo

開門效果實現(xiàn)的關(guān)鍵

1. 容器元素上設(shè)置perspective視角距離

示意CSS代碼如下：

.door-frame {
    perspective: 1200px;
}

2. transform-style設(shè)置為3D變換

我們的門需要設(shè)置為3D變換樣式，否則效果回是平面的，會比較生硬，同時設(shè)置背后不可見，以符合現(xiàn)實認(rèn)知。
示意CSS代碼如下：

.door {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

3. rotateY變換實現(xiàn)門開關(guān)效果

此時，我們只要通過CSS或者JS改變門元素的rotateY變換角度值，開關(guān)門效果就有了。

例如，上面的單門開門效果，默認(rèn)狀態(tài)下，關(guān)閉，此時rotateY角度是0deg，同時是右開門，于是可以設(shè)置transform-origin為left，也就是們的左邊緣為軸：

.door {
    transform: rotateY(0deg);
    transform-origin: left;
}

當(dāng)門完全打開，則角度是90度，CSS表示為：

.door {
    transform: rotateY(-90deg);
}

效果就實現(xiàn)了，核心就這么簡單。

如果理解上還是有些云里霧里，可以參見我之前訪問量較高的一篇文章：“好吧，CSS3 3D transform變換，不過如此！”

開門效果實現(xiàn)的難點

其實就最終效果實現(xiàn)而言，難的其實不是開關(guān)門動作本身，而是門的3D效果的實現(xiàn)，本質(zhì)上就是實現(xiàn)一個立方體效果，只不過這個立方體比較扁而已。

對于CSS3 立方體效果的實現(xiàn)，我的技巧是這樣的：

還記不記得小時候我們玩折紙的手工，是如何從2d平面變成3d立方體的呢？

我的實現(xiàn)步驟也是這樣，首先，先把平面效果實現(xiàn)好，示意圖如下（由于是半開門，我們只需要4個面就好了）：

然后，腦中腦補空間結(jié)構(gòu)，要想變成3D效果，則上邊沿需要沿著水平線超視覺方向折疊過去90度，右邊沿沿著垂直線超視覺方向折疊過去90度。

這種行為動作用CSS 3D變換語言描述就是rotateX(90deg)和rotateY(90deg)。

由于CSS中元素默認(rèn)的transform變換中心點是中心，因此，上面直接旋轉(zhuǎn)還不行。要么我們修改transform-origin位置，要么元素的中心提前偏移到門邊緣的變換軸上。

于是，三兩下，我們3D效果就有了。具體可參見demo頁面源代碼，很好的學(xué)習(xí)案例素材。

二、CSS3雙門3D開門效果的實現(xiàn)

辦公室或者書房的門是單門，深府大院的門都是雙門，例如著名的小學(xué)生動畫柯南中的那個門。

既然單門效果可以實現(xiàn)，雙門自然也不在話下，效果如下視頻：

同樣的，上面截屏視頻沒有音效，如要真實感受開門的沖擊，您可以狠狠地點擊這里：CSS3 3d變換實現(xiàn)帶音效的的雙門開門效果demo

實現(xiàn)原理和上面單門效果大同小異，就不贅述。

這里的開門動畫完全使用CSS3 transition過渡實現(xiàn)的，和一開始demo有所區(qū)別，一開始demo是定時器不斷改變rotateY角度實現(xiàn)的。都是可以的，看君所需。

關(guān)于“CSS3如何實現(xiàn)3D開門動畫效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。