javascript - 制作圆周运动选择菜单

Question

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

这个想法是您将您的选择安排在一个圆圈中，当您选择一个时，整个圆圈会旋转以使您的选择在顶部对齐，我集思广益的代码笔会给您一个想法： https ://codepen.io/ tatsujb/笔/EOVMjg

（(click)s是因为我在角度下工作）

但是当我这样做时，我开始意识到我在旋转 dom 时走错了路，因为我的标志最终会倒置......

我怎样才能制作这样的菜单？

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

我只需要一个不会轮换多项选择内容的设置的基线，我会计算出 js。

更新 ：

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

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

第二次更新：

misorude 的建议只是旋转内脏似乎行得通：

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

标签： javascriptcsshtmlcss-transitionscss-animations

Answer 1

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

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

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