Анимирование по окружности при нажатии

const initialRadius = 100;
const angles = {
  initial: [300, 0, 60], //углы инициализации
  
  //Маска поворота
  rotate: {
    right: [60, 60, 240], //право
    left: [-240, -60, -60] //лево
  }
}

//инициализируем клавный круг, присваиваем ему высоту и ширину
const cMain = document.querySelector('.cMain');
cMain.style.height = `${initialRadius*2}px`;
cMain.style.width = `${initialRadius*2}px`;


//Ф-я создания враппера, который будем вращать
const createDotWrapper = () => {
  let circle = document.createElement('div');
  circle.classList.add('dotWrapper');

  //задаем ширину и высоту исходя из базового радиуса.
  circle.style.height = `${initialRadius*2}px`;
  circle.style.width = `${initialRadius*2}px`;

  //позиционируем по центру основного круга
  circle.style.left = `calc(50% - ${initialRadius}px)`;
  circle.style.bottom = `calc(50% - ${initialRadius}px)`;
  circle.appendChild(createDot())

  return circle;
}

//ф-я создания точки
const createDot = () => {
  let dot = document.createElement('div');
  dot.classList.add('dot');
  return dot;
}

//ф-я переназначения активной точки.
const setActive = (element) => {
  document.querySelector('.dot-active').classList.remove('dot-active');
  element.classList.add('dot-active');
}

//ф-я поворота 
const rotate = (eventCoordinatesX) => {
  //определяем направление поворота
  let direction = (document.querySelector('.dot-active').getBoundingClientRect().left - eventCoordinatesX) > 0 ? 'right' : 'left';
  
  //ищем все точки, определяем в массив, сортируем массив слева направо, в зависимости от их положения по оси x (самая левая точка будет первой в массиве и т.д.), это нужно, чтобы наложить маску поворота.
  let dots = Array.from(cMain.querySelectorAll('.dot')).sort((a,b)=>(a.getBoundingClientRect().left < b.getBoundingClientRect().left) ? -1 : 1)
  
  //перебираем точки, применяем к врапперу (родитель) маску поворота в порядке очерди, в зависимости от направления.
  dots.forEach((dot, index)=>{
    //извлекаем текущий угол поворота.
    let actualAngle = Number(dot.parentNode.style.getPropertyValue("transform").match('-?[0-9]+'))
    //новый угол
    let newAngle = actualAngle + angles.rotate[direction][index];
    //применяем новый угол к родителю
    dot.parentNode.style.transform = `rotate(${newAngle}deg)`
  })
}


/*Начинаем рисовать*/

//Создаем точки, учитываем, что поворачиваем мы .circle;
angles.initial.map((angle, index) => {
  let circle = createDotWrapper();
  circle.style.transform = `rotate(${angle}deg)`;
  // установим дефолтный активный элемент
  (angle==0) && circle.querySelector('.dot').classList.add('dot-active')
  //если надо, то точкам можно айдишники назначить, в работе они не используются.
  //circle.querySelector('.dot').setAttribute('id', `dot-${index}`)
  cMain.appendChild(circle);
})

//Назначение обработки нажатия
cMain.querySelectorAll('.dot').forEach((dot, index)=>{
  dot.onclick = (event) => {
    //Скипаем, если кликнули по активному
    if (dot.classList.contains('dot-active'))
      return
    rotate(event.pageX);
    setActive(dot);
  }
})

.cMain {
  position: absolute;
  border-radius: 50%;
  border: 5px solid #2D2D2D46;
  background: #060505;
  z-index: 1;
}

.dotWrapper {
  position: absolute;
  transition: transform .5s linear;
  pointer-events: none;
}

.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  /*Позиционируем на 12 часов*/
  left: calc(50% - 10px);
  top: -10px;
  z-index: 999;
  cursor: pointer;
  pointer-events: auto;
}

.dot-active {
  background: blue;
}

<div class="cMain"></div>