进行圆周运动选择菜单

Question

我的想法是制作一个带有简洁动画的菜单，用于选择类似于how叫的移动城堡魔术位置选择器的语言：

这个想法是，您将选择排列成一个圆圈，当您选择一个圆圈时，整个圆圈都会旋转以使您的选择在顶部对齐，我脑力激荡的代码笔将为您提供一个想法： https://codepen.io/tatsujb/pen/EOVMjg

（{(click)是因为我在有角度的环境下工作）

但是当我这样做的时候，我开始意识到我在旋转dom的道路上走错了方向，因为我的旗帜会倒过来...

如何制作这样的菜单？

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

我只需要一个基线来进行设置，该设置不会旋转多个选择的内容，因此我将得出js。

更新：

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

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

第二次更新：

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

https://codepen.io/tatsujb/pen/aQdZOm

Answer 1

我发现@misorude的建议足以达到我的目的。

这是一个Codepen示例：https://codepen.io/tatsujb/pen/aQdZOm

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