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