Как поворачивать круг на определенный градус?

Question

[starsun26]

Всем привет, есть вот такой элемент


Маленькие круги - кнопки по клику на который должен провернуться див на котором они расположены, имеют position: absolute

Как при клику на определенный кружок-кнопку проворачивать круг до этого элемента (правый элемент - .active)?
Пробовал добавлять им data-* атрибуты и поворачивать через transform: rotate(data-rotate), активному ноль, верхнему 120, нижнему 240 и подменять их по клику, но так очень криво все работает

Comments

[Максим Тимофеев]

1. Что за элемент? Картинка, див, svg, canvas? Я уже молчу про то что не мешало бы в песочницу код кинуть
2. При чем тут data атрибуты? Вы или совсем не понимаете что делаете или совсем не до описали вопрос.

[starsun26]

Максим Тимофеев, Сформулировал вопрос криво, извиняюсь, мелкие кнопки - картинки, под ними подложка с фоном - изображением. Дата атрибуты делал для того, чтобы проворачивать подложку через transform: rotate(data-rotate) через JS

[DTX]

Пробовал добавлять им data-* атрибуты и поворачивать через transform: rotate(data-rotate), активному ноль, верхнему 120, нижнему 240 и подменять их по клику, но так очень криво все работает

Всё нормально должно работать, инфа 100%. Где пример кода на codepen.io?

Answer 1

[Егор Живагин]

В правильном направлении думали. Оставьте им эти data-атрибуты, но не подменяйте

function rotateElem (  ) {
    var needRotate = $('.this_element').data('rotate');
    $('.element').css({ 'transform': 'rotate(' + needRotate + 'deg)' });
}

Comments

[starsun26]

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