CSS3实战：实现一个旋转的3D金币最近，亲爱的产品同学提出一个需求：在页面的某个角落添加一个旋转的金币，吸引用户参与活动~越快越好，我们“没见过”的同学直接用css做了一个金币旋转的动画。来看看是怎么实现的~一个标签，简单粗暴+方便。快要实现的时候遇到了一个问题。UI小姐姐还没做设计，排期要x天后~怎么办？没有辛苦的工作，只有努力的人！链接好说，旋转金币怎么调？旋转硬币=旋转+硬币。旋转可以通过css3的动画属性animation+@keyframes:金币呢？用div来DIY吧~如果把金币的表面花纹擦掉，金币是一个特别短的圆柱体，我们需要正面+背面+弧面。那么正面+背面就很简单了，侧面怎么画呢？找了很多css文档，都没有找到除了border-radius的曲线属性。我的DIY金币过程到此结束了吗？当然不是！！！为中华民族的智慧干杯~早在几千年前，祖冲之就告诉我们~如果不能做到正圆，就让它近似圆！多年的前端行业经验告诉我，只要能骗过用户的视觉，那么一切都是真的！！！就是你——多棱镜的方案是可以的，但麻烦的是，能画出多少个棱镜来欺骗用户的视觉呢？我必须手写多少css+div？不用慌，less中的when是用来处理n个循环的，前端frame中的整个map是用来生成div的。使用translate+rotate来确定这些div的位置~默认绘制的位置移动到中心，水平旋转，调整每块的角度，移动到多棱镜的边缘。效果图：完美解决~最后附上完整的代码骨架：TheEnd
