Элементы расположены по кругу, кол-во элементов опционально, они должны крутится во круг центра. Как сделать анимацию?

Question

[verstak2020]

Привет знатокам.
Круг вращается вокруг своей оси на гранях которого расположены картинки.
На первый взгляд может показаться, что rotate поможет, но картинки в таком случае тоже вращаются, а не должны.
Может есть готовый плагин, желательно на js, но и jq подойдет

Много решений перепробовал, но подходящего не нашел под мои задачи пока что
upd:
Сообразил такой код, но не выходит выроянть во время анимации элементы, хотя если анимацию выключить то все +- ровно

https://codepen.io/jivoy_web/pen/VwNLBbW

Comments

[Alexandroppolus]

но картинки в таком случае тоже вращаются, а не должны.

а если их вращать вокруг своих осей в другую сторону?

[Ivan Ustûžanin]

или вариант предложенный Alexandroppolus, или выносим их вне круга и меняем им координаты через sin и cos

[verstak2020]

Alexandroppolus, а как расчитать скорость и прочие параметры для этого) да и не думаю, что это верный вариант, скорее всего будет фризить и заметно будет что они дергаются, могу ошибаться. С js у меня не очень, может есть какойто пример

Answer 1

[Alexandroppolus]

https://codesandbox.io/p/sandbox/rotated-ffjlsh

набросок. Вроде бы синий квадрат синхронизируется с парентом и не меняет своего разворота. Скорость вращения та же

Comments

[verstak2020]

Спасибо за помощь, я чуть адаптировал под свой варинт, не знаете как подровнять элементы что бы они по центру круга все время были. Если анимацию остановить то они +- равно, но при воспроизведении анимации уходят в сторону.

https://codepen.io/jivoy_web/pen/VwNLBbW

[Alexandroppolus]

verstak2020, там надо правильно расставить чилды

https://codesandbox.io/p/sandbox/rotated-ffjlsh

здесь я обернул чилы во врапперы нулевого размера, так что враппер находится по центру чилда
далее я в js расставляю врапперы, с учетом центра фигуры.
и чилды начинают вращаться вокруг той точки, где находится враппер.