Вращение и перевод изображения Javascript

Question

У меня есть 4 изображения, соединенных друг с другом, которые образуют большое изображение. Моя задача - повернуть большое изображение на определенный угол, который задает пользователь. Теперь, чтобы повернуть полное изображение, мне нужно повернуть соединенные изображения меньшего размера, а затем преобразовать их соответствующим образом, чтобы казалось, что полные изображения повернуты.

Но не могу правильно получить координаты перевода. Пожалуйста, помогите мне с этим. Кроме того, если есть другой способ сделать это, вы можете сказать мне и об этом.

Код можно найти здесь -https://jsfiddle.net/e4qp6btx/1/

document.getElementById("img1").style.transform = "translate(" + x + "px," + y + "px) rotate(" + angle + "deg)" ;

Изменить - я действительно хочу вращать и переводить отдельные изображения, а не весь контейнер.

Answer 1

Второе решение.

По умолчанию поворот происходит из центра изображения. Вы можете изменить это, установив . Следующий CSS заставит изображения вращаться так, как они должны, поэтому вам не нужно их переводить. Вам, вероятно, следует объединить два моих ответа во Франкенштейне, потому что вам почти не нужен код для вашего работать.

      #img1 {
  transform-origin: bottom right;
}

#img2 {
  transform-origin: bottom left;
}

#img4 {
  transform-origin: top right;
}

#img3 {
  transform-origin: top left;
}

Обратите внимание: вы перепутали позиции #img4 и #img3, где #img4 стоит перед #img3, следовательно, эти изображения имеют переменное происхождение преобразования.

---

Дополнительный бонус:

Я считаю, что устанавливать одно и то же значение для четырех разных элементов довольно расточительно, поэтому я бы предложил использовать переменную CSS для для сохранения значения поворота на всех изображениях. Было бы легче тестировать разные значения в Инспекторе, если бы вы сделали это так.

CSS

      .container {
  --image-rotation: 0deg;

  width:500px;
  height:500px;
  padding: 50px;
}

img {
  width:100%;
  height:100%;
  
  transform: rotate(var(--image-rotation));
}

Javascript

       rotateImage() {
    const imgContainer = document.querySelector('.container');
    let angle = document.getElementById('angle').value || 0; //angle to be rotated by
    angle = angle % 360 + 'deg';

    imgContainer.style.setProperty('--image-rotation', angle);
  }

https://jsfiddle.net/mg46dz7h/

Answer 2

Вместо этого я бы просто нацелился и повернул контейнер. Однако при попытке использовать Mac Firefox между изображениями меньшего размера появлялись небольшие промежутки.

      rotateImage() {
    var angle = document.getElementById('angle').value || 0; //angle to be rotated by
    angle = angle % 360 + 'deg';

    document.querySelector('.container').style.transform = `rotate(${angle})`;
}

Я бы также использовал переменную CSS для установки угла, а затем обновил бы переменную вместо использования встроенного стиля для изменения transform: rotate стоимость.

Наконец, я бы дал контейнеру уникальный id.