Создание кругового меню выбора движения

Question

Я решил создать меню с аккуратной анимацией для выбора языков, напоминающих селектор волшебного местоположения движущегося замка:

идея заключается в том, что у вас есть варианты выбора, расположенные по кругу, и когда вы выбираете один, весь круг вращается, чтобы ваш выбор выровнялся сверху, кодовое перо, на котором я проводил мозговой штурм, даст вам идею: https://codepen.io/tatsujb/pen/EOVMjg

((click) с, потому что я работаю под углом)

но когда я сделал это, я начал понимать, что иду по неправильному пути, вращая дом, потому что мои флаги будут вверх ногами ...

как я могу сделать такое меню?

(да, в конце концов js будет обрабатывать классы css, которые я добавляю: по одному классу css для каждой возможной позиции вращения, таким образом будут возможны переключение назад, вперед и пропуск шагов).

Мне нужна только базовая линия для установки, которая не будет вращать содержимое нескольких вариантов, я отработаю js.

ОБНОВЛЕНИЕ:

Я думаю, что собираюсь сделать что-то более похожее на это: https://codepen.io/tatsujb/pen/bQEEow

проблема с этим решением в том, что у него нет кругового движения.

2-е ОБНОВЛЕНИЕ:

предложение misorude's просто повернуть внутренности, кажется, работает хорошо:

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

Answer 1

Я обнаружил, что предложение @ misorude работает достаточно хорошо для моих целей.

Вот пример кода: https://codepen.io/tatsujb/pen/aQdZOm

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