大家好，今天跟大家分享的是通過CSS3實現3D輪播動畫效果的方法，話不多說，點擊下方視頻查看效果：

首先，在操作之前我們必須要知道它的原理，下面我以動圖的形式來展現他形成過程：

原理

如果還不理解，下面我們再把它細化一下：

逐步

這下我們可以清楚看出，所謂的3D立體效果其實就是由幾個平面圖形經過旋轉和移動組合在一起而形成的，現實中我們可以用幾張卡片模拟擺放出來。

既然是3D立體效果肯定需要在三維空間内完成，在網頁中三維坐标如下圖所示，在CSS中我們可以讓目标對象延任意坐标軸移動（translate）或以任意坐标軸為中心旋轉（rotate），根據需要指定即可。

頁面三維坐标

接下來我們來看一下如何通過CSS3在網頁中實現這種效果。

1. HTML結構：外圍設置兩層<div>盒子包裹内容主體，最外層<div>用來設置基本布局和樣式，第二層<div>用來引入動畫，内容部分用9個<div>小盒子生成。

HTML結構

2.基本樣式設置：這裡不用多說，都能看得懂，line-height設為90px與後面的内容小盒子同高實現文本垂直居中。

基本樣式

3.主體内容通用樣式：這裡需要注意的是position屬性設為absolute,可以不設置具體值但必須要有，目的是為了讓9個小盒子重疊在同一平面。

通用樣式

4.立體效果設置：前面已經介紹過了，要實現立體效果，需要每個内容主體經過一定的旋轉和移動。那麼問題來了，要旋轉多大的角度移動多遠的距離呢？參考下圖我們從俯視的角度來理解這個問題，順便複習一下初中數學知識。

計算方法

由此可知，我們需要旋轉的角度依次為：0° ，40° ，80°， 120° ······，依次增加40°，需要移動的距離大約為192px,為了讓圖片之間留出一定的間距，實際移動距離略大于理論距離，該示例移動了210px，下面是相應的CSS。

注意事項：背景顔色可以适當的設置一下透明度，每張圖片都是先以Y軸為中心旋轉（rotateY）相應的角度，再延Z軸移動（translateZ）210px，如果先移動再旋轉你會發現9張圖片是交叉在一起的。

現在刷新頁面可以得到下面的效果：

咦！貌似有點那個意思了，聰明的你應該會發現還有兩個問題沒有解決：一是它還沒有動起來，二是看上去并不立體。那麼重點來了······

5.動起來：首先我們需要定義一個動畫，然後再需要動的地方引用它，從開篇的效果中可以看出是由9張圖片組成的整體以Y軸為中心進行360°循環旋轉。因此我們以 “@keyframes 動畫名稱” 的方式來定義一個動畫（詳細介紹請參考w3school），0%為初始狀态，100%為最終狀态，然後再父元素中引用它即可。

scroll為動畫名稱，可自定義

6.更立體：“transform-style:preserve-3d”能夠化腐朽為神奇，在父元素中添加該屬性即可。

立體

此時刷新頁面會是這種效果：

正常情況下物體離視線越遠越小，但一個規整的立體圖形如果離我們視線很近的話每個面的大小差别很難看出來，在CSS中可以用perspective來調節視角的遠近，還可以用“perspective-origin”來調整視角的位置，感興趣的小白們可以去試試。

好了，大功告成，現在可以刷新你們的頁面了！

聲明：本人也是小白一枚，此文隻為相互交流，如有錯誤請多指正

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!