這種沿著y軸做3d旋轉(zhuǎn)圓盤的抽獎活動怎么做，提供些思路

1、3比較容易，2比較難

自己琢磨了一下，解決了，基本思路就是：

只設(shè)置一個旋轉(zhuǎn)元素，通過旋轉(zhuǎn)過程中設(shè)置元素的內(nèi)容來實現(xiàn)獎品切換。

把360旋轉(zhuǎn)一周分成四次動畫來實現(xiàn)，每個動畫周期只旋轉(zhuǎn)90度，每個動畫周期動畫的執(zhí)行設(shè)置為勻速的。在旋轉(zhuǎn)角度90，270，450 .....時設(shè)置元素內(nèi)容實現(xiàn)切換，因為此時人眼看到轉(zhuǎn)盤時是一條線，是切換獎品圖案的最佳時機。

此時會遇到一個問題：因為轉(zhuǎn)盤分正面和背面，比如已經(jīng)旋轉(zhuǎn)90度時，切換后進行從90->180度旋轉(zhuǎn)的時候，人眼看到的是轉(zhuǎn)盤的背面，從背面看過去獎品圖是反的，所以此時需要對獎品圖的元素進行一次180翻轉(zhuǎn)，這樣即便轉(zhuǎn)盤是背面，看到的獎品圖就是正的，從270 -> 360 的過程中因為看到的是正面，就不用對獎品圖翻轉(zhuǎn)，根據(jù)已經(jīng)旋轉(zhuǎn)的角度判斷一下即可。

為什么考慮每次動畫周期設(shè)置只轉(zhuǎn)90度？而且每次動畫設(shè)置為勻速？
這是因為我通過寫一個控制器，控制器返回下一次動畫執(zhí)行的時長，根據(jù)動畫已經(jīng)執(zhí)行的次數(shù)來控制時長的返回：隨著次數(shù)增加，一次動畫的時長從200ms（開始速度） -> 50ms（最快） -> 500ms（最慢），這樣一來，雖然一次動畫的過程是勻速的，但下一次動畫執(zhí)行如果時長更短，看起來就是后一次轉(zhuǎn)的比第一次快，多次連續(xù)執(zhí)行看起來可以做到先加速再減速的過程。我這里設(shè)置一次動畫只旋轉(zhuǎn)90度，即旋轉(zhuǎn)一周是四次不同的速度，360度里細分的越細效果越好，我細分90度一個單位也表現(xiàn)很完美了，而且這還能很好的配合切換獎品時機 2n+1 個90度時）的判斷。

有了以上思路，關(guān)鍵就是考慮如何判斷上一次動畫結(jié)束時機，這樣才能上一次結(jié)束了就馬上調(diào)用下一次。
這里簡單的來做可以使用jquery提供的animate 方法，最后一個參數(shù)就是動畫結(jié)束后的回調(diào)方法，回調(diào)方法里遞歸調(diào)用自己寫的動畫執(zhí)行即可；如果想挑戰(zhàn)一下，自己實現(xiàn)一個animate即可，谷歌一樣教程很多。我用promise實現(xiàn)的。

最后你可以設(shè)定一個最小的轉(zhuǎn)動次數(shù)，達到這個次數(shù)，就把服務(wù)器獲取到的中獎結(jié)果的圖樣設(shè)置到轉(zhuǎn)盤元素上，然后停止....

做完后的樣子：