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 来确定地位~
默认绘制的地位
移到核心
横向旋转
调整每片角度
挪动至少棱柱边缘
最终效果图：
完满解决~
最初附上残缺代码
骨架：