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 来确定位置~

默认绘制的位置

移到中心

横向旋转

调整每片角度

移动至多棱柱边缘

最终效果图：

完美解决~

最后附上完整代码

骨架：