в идеале, чтобы каждое нажатие на ссылку делало один поворот по часовой стрелке на 90 градусов
Можно сделать несколько классов, для каждого из которых определён свой поворот, и последовательно их менять:
.rotate0 { transform: rotate(0deg); }
.rotate90 { transform: rotate(90deg); }
.rotate180 { transform: rotate(180deg); }
.rotate270 { transform: rotate(270deg); }
<a href="#" data-rotate="-1">Повернуть на -90 градусов</a>
<a href="#" data-rotate="+1">Повернуть на +90 градусов</a>
const photo = document.querySelector('.photo');
const classes = [ 'rotate0', 'rotate90', 'rotate180', 'rotate270' ];
let index = 0;
document.addEventListener('click', function(e) {
const rotate = +e.target.dataset.rotate;
if (rotate) {
photo.classList.remove(classes[index]);
index = (index + rotate + classes.length) % classes.length;
photo.classList.add(classes[index]);
}
});
UPD. Вынесено из комментариев:
а можно пример, чтобы поворачивать по 1 градусу и в обратную сторону
Для поворота по одному градусу я конечно не стал бы делать отдельные классы, а вписывал бы нужное значение в
style.transform:
<a href="#" data-rotate="-1">rotate ccw</a>
<a href="#" data-rotate="+1">rotate cw</a>
const photo = document.querySelector('.photo');
let angle = 0;
document.querySelectorAll('[data-rotate]').forEach(n => n.addEventListener('click', onClick));
function onClick({ target: { dataset: { rotate } } }) {
angle = (angle + +rotate + 360) % 360;
photo.style.transform = `rotate(${angle}deg)`;
}
