Как использовать свойство rotate?

Добрый день, помогите пожалуйста с версткой.
Есть круг, который позиционируется по центру. На круге есть элементы. При клике его свойство ротейт должно изменять на + 30 дег.
Но круг когда позиционируется по центру начинается смещаться по не понятной мне траектории, я не могу понять как это исправить.
https://codepen.io/scrappyjs666/pen/KKrvwye

Если же не позиционировать по центру (в тевтулзах просто стрелочкой увеличивать ротейт, то он вращается как раз на месте (но тут правда не заметно вращение, но все же)

https://codepen.io/scrappyjs666/pen/YzRxPLW

Дополнительно:

const button = document.querySelector('.test'); const circle = document.querySelector('.circle');  button.addEventListener('click', () => {   circle.style.transform = `translate(-50%, -50%) rotate(${circle.style.transform+30}deg)`; });

• Спасибочки
• sw213, на будущее: В скриптах (да и в css) лучше отделить зависимость одного свойства трансформации от другого. Бывают случаи, когда их может быть два, три и более, плюс они могут по разному изменяться.
  Тут лучшим подходом будет устанавливать их отдельно друг от друга с помощью пользовательских свойств.

  В вашем случае будет примерно так

  .circle { /* ... */ --translate: translate(-50%, -50%); --rotate: rotate(0deg); transform: var(--translate) var(--rotate); } /* можно отдельно изменить свойство, например по :hover */ .circle:hover { --rotate: rotate(90deg); }

  .circle { /* ... */ --translate: translate(-50%, -50%); --rotate: rotate(0deg); transform: var(--translate) var(--rotate); } /* можно отдельно изменить свойство, например по :hover */ .circle:hover { --rotate: rotate(90deg); }

  button.addEventListener('click', () => { // в скрипте также можно изменить отдельное свойство circle.style.setProperty('--rotate', `rotate(${circle.style.rotate+30}deg)`); });

  button.addEventListener('click', () => { // в скрипте также можно изменить отдельное свойство circle.style.setProperty('--rotate', `rotate(${circle.style.rotate+30}deg)`); });