javascript - 带有图像的命运之轮(无 Canvas )

Question

所以，对于我们的项目，我们必须制作一个命运之轮游戏(基于游戏节目)，我制作了所有东西(比如检查单词是否正确等等)，但我仍然不知道如何做动画。我必须制作动画的内容与所附图片中的内容相似。老师告诉我们不能用canvas，所以不能用.rotate()。那么，有人对如何实现这一点有任何想法吗？请记住，我什至不需要轮子来实际旋转；即使只是图片改变位置，它也会起作用。

这是一个示例轮的图片(假装数字都是图片)。我已将所有图片存储在一个包含所有图片的数组中: https://en.m.wikipedia.org/wiki/Wheel_of_Fortune_(U.S._game_show)#/media/File%3AWheel_of_Fortune_Round_1_template_Season_31.png

PS:出于学术诚信的目的，我不能在这里发布我的代码。

谢谢大家的宝贵时间!

Answer 1

这是一种非常基本的方法:http://codepen.io/AaronGeorge/pen/zoOWag^死链接

您使用的是 CSS 转换属性并使用旋转值。

您需要做一些数学计算才能计算出需要将图像旋转多少，但是 transform: rotate(amount); 无需使用 Canvas 即可实现。