CSS3實戰：實現一個旋轉的3D金幣

最近親愛的產品同學，提了一個需求：在頁面某個角落增加一個旋轉的金幣來吸引用户參加活動~越快上越好，我們的“未見”同學直接上手用css擼了一個旋轉的金幣的動畫，讓我們來看一下是如何實現的吧~

作者：未見

如下圖

拿到這個需求，第一反應gif+a標籤，簡單粗暴+便捷。即將實施就碰到一個問題，UI小姐姐還沒有做設計，排期需要在x天后~怎麼辦？沒有難做的工作，只有解決困難的打工人！

鏈接好説，旋轉的金幣怎麼整？旋轉的金幣 = 旋轉 + 金幣。旋轉通過 css3 的動畫屬性 animation+ @keyframes 就可以搞定：

那麼金幣怎麼辦？我們用div來DIY一下吧~如果把金幣的表面圖案都擦掉，那金幣就是一個特別矮的圓柱體，我們需要一個正面+背面+彎曲的側面。那麼正面+背面很簡單

側面怎麼畫？翻了不少css文檔，除了border-radius 還真沒有找到一個彎曲的屬性，我徒手DIY金幣的過程就要這麼結束了麼？

當然不會！！！敬我中華民族智慧一杯~早在數千年前，祖沖之就告訴我們~實現不了完美的圓，那就讓它近似圓就好了！數年前端從業經驗告訴我，只要能騙過用户的視覺，那什麼都是真的！！！就是你了——多稜柱

方案有了，但麻煩的是，畫多少稜面才能騙過用户的視覺？我得手寫多少css+div？不用慌，less中的 when 來搞定n次循環，前端框架中整個map來生成div

對這些div使用 translate + rotate 來確定位置~

默認繪製的位置

移到中心

橫向旋轉

調整每片角度

移動至多稜柱邊緣

最終效果圖：

完美解決~

最後附上完整代碼

骨架：

The End