Как добавить в div еще один class, но только для первой картинки?
<a href="#" id="rad90" onclick=someFunc()>Повернуть на 90 градусов</a>
var a = 0;
function someFunc() {
a = a + 90;
document.getElementById("image").style.transform = "rotate("+a+"deg)";
}
document.querySelector('.cartochka-carousel-nav-container').addEventListener('click', function() {
if (document.getElementById('block_primerka').style.opacity == "0") {
show_hide('block_cart')
}
});
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no>
прописал ? <button data-move="-10,0">left</button>
<button data-move="10,0">right</button>
<button data-move="0,-10">up</button>
<button data-move="0,10">down</button>
<button data-move="10,10">right down</button>
<button data-move="20,-5">fast right slow up</button>
$(document).on('click', '[data-move]', function() {
const [ dx, dy ] = this.dataset.move.split(',').map(Number);
$('#overlay')
.css('left', (i, val) => `${parseInt(val) + dx}px`)
.css('top', (i, val) => `${parseInt(val) + dy}px`);
});
// или, к чёрту jquery
document.addEventListener('click', e => {
const { move } = e.target.dataset;
if (move) {
const block = document.querySelector('#overlay');
const { left, top } = getComputedStyle(block);
const [ dx, dy ] = move.split(',').map(n => +n);
block.style.left = parseInt(left) + dx + 'px';
block.style.top = parseInt(top) + dy + 'px';
}
});
в идеале, чтобы каждое нажатие на ссылку делало один поворот по часовой стрелке на 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]);
}
});
а можно пример, чтобы поворачивать по 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)`;
}