css3实现3D多边形

效果预览

该效果预览不是最新的效果图，嫌麻烦把mp4转成gif就不上传新的效果预览了。顺便推荐一下一个在线文件转换格式的网站：https://www.aconvert.com/video/（之前一直在用covertio现在好像收费了）
简述下代码部分吧：（画多棱柱体就不说了，主要讲一下让它支持手势运动）
1.因为在pc端在鼠标按下滑动会产生选中元素的行为，所以在父级元素设置了user-select:none
2.在旋转的关键帧动画里本来是form:0deg => to: 360deg，但是在添加手势事件后的自然旋转会导致旋转速度变快或者变慢（原因是：执行这个自然旋转的动画时间固定为48s，人为去干预了它的旋转角度，导致整个动画的过程缩短或增加，时间却一直都是48s，故如此），baseRotate为每次重新做手势的基础角度，currentRotate为每次结束手势产生的旋转角度，然后就想到用css变量来改变关键帧动画的from、to的角度，body.style.cssText = "--beginDeg:" + currentRotate + "deg;--endDeg:" + (currentRotate + 360) + "deg;";这样就相当于重置了关键帧动画，这样就保持了动画速度