如何使用CSS3實現(xiàn)3D動畫

小編給大家分享一下如何使用CSS3實現(xiàn)3D動畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、動畫屬性

1.transform-style: flat | preserve-3d 動畫的形式

flat：默認值平面，也就是沒有3d效果

preserve-3d：3d效果展示

如果要用3D表現(xiàn)，這個屬性是必須啟用的，當然注意屬性要加各種前綴。

（這個屬性可以把一個處于2維的div變?yōu)?d空間，把這個屬性比作一個相機的攝像頭,這個div內(nèi)的內(nèi)容會以3d的形式通過攝像頭的形式反饋給你,他的子元素才會享受3d效果,子元素以下的元素就不會有3d效果。）

2.transform-origin：50% 50%;

旋轉(zhuǎn)移動圍繞的軸線,默認是中心,可以設(shè)left,right,top,bottom,也可以設(shè)值數(shù)值，這樣可以調(diào)整旋轉(zhuǎn)移動所圍繞的軸線，完成諸如翻頁，開門等動作。

(這就相當于你的眼鏡啦,位置不同效果也就不同了)

3.perspective 視角

值越小，透視距離越近，效果越明顯

該屬性為定義3D變換的元素與視圖的距離，也就是透視距離。這個屬性應(yīng)添加到視圖元素(變換元素的父元素)上。

這是3d動畫必備的屬性，如果不添加這個屬性，則動畫會變成平面效果。

一般用在舞臺元素也就是容器上，這樣會讓該容器中所用動畫元素使用一個視角，這個屬性還可以單獨用在每個元素中，自然元素也就只呈現(xiàn)自己的視角樣式。

4.backface-visibility：hidden 是否隱藏元素背面

二、動畫實現(xiàn)

下面我用部分代碼實際闡述一下3D效果的實現(xiàn)。

1.卡片翻轉(zhuǎn)

html

web前端入門到實戰(zhàn)：CSS3實現(xiàn)3D動畫

css

web前端入門到實戰(zhàn)：CSS3實現(xiàn)3D動畫

效果

2.立方體

html

css

效果

3.長方體

html

web前端入門到實戰(zhàn)：CSS3實現(xiàn)3D動畫

css

效果

4.圖片旋轉(zhuǎn)

html

css

效果

以上是“如何使用CSS3實現(xiàn)3D動畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！