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

Question

[sw213]

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

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

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

Answer 1

[szQocks]

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)`;
});

Comments

[sw213]

Спасибочки

[Сергей delphinpro]

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

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

.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)`);
});