制作圆周运动选择菜单

Question

我的想法是为 selecting 语言制作一个带有简洁动画的菜单，类似于 howl 的移动城堡魔法位置 select 或者：

这个想法是你把你的选择排列成一个圆圈，当你 select 整个圆圈旋转让你的选择在顶部对齐时，我集思广益的代码笔会给你一个想法: https://codepen.io/tatsujb/pen/EOVMjg

（(click)是因为我在angular下工作）

但是当我做这个的时候，我开始意识到我在旋转 dom 时走错了路，因为我的旗帜最终会颠倒...

如何制作这样的菜单？

（是的，最后 js 将处理我添加的 css classes：每个可能的旋转位置都有一个 css class，这样可以向后切换, 前进和跳过步骤将是可能的）。

我只需要一个不会轮换多选内容的设置基线，我来搞定js。

更新：

我想我会做更多像这样的事情： https://codepen.io/tatsujb/pen/bQEEow

此解决方案的问题是它没有圆周运动。

第二次更新：

misorude 关于旋转内脏的建议似乎可行：

Answer 1

我发现@misorude 的建议很适合我的目的。

.select-es{
    transform: rotate(135deg);
    .choice{
      transform: rotate(-135deg);
    }
  }

Making a circular motion selection menu