簡單的旋轉燈籠效果——css3事例

css3 的3D轉換可以做到良多不錯的頁面的結果，此次分享一個，扭轉燈籠的3D結果的事例；

東西/原料

1
架構如下圖所示，一個 stage（舞臺）一個 container（容器），容器存放著幾個div，作為‘燈籠’的扇面；
2
我們先節制舞臺和容器的樣式，和設置一些關頭屬性，perspective 這個設置視距；-webkit-transform-style:preserve-3d；設置為3D（差不多這個意思），然后下面的-webkit-transform：rotateX（-30deg） rotateY（0deg）；扭轉一下容器讓結果更好一點；
transition：40s linear；
這個是關頭，設置過渡，別的設置時候，是完當作過渡需要的時候，和曲線（具體的可以查資料）
3
然后我們設置一下小div 的樣式和透明度，經由過程 border-radius這個屬性將div變為圓形，初步的結果如圖二；（因為設置看定位，所以div都重合了）
4
然后我們別離設置，每個小div 的顏色和扭轉角度，經由過程將 div慢慢的散開實現圖二的結果；
5
然后我們再次設置一個懸停事務，觸發是容器起頭繞 Y 軸動彈，實現燈籠動彈結果；
6
給大師看一下整個 css 的內容，算是一個參考吧，代碼的根基格局仍是比力主要的（別的最后的每個小 div 的樣式沒有全數截出來，究竟結果上面都有）