Rotation and Translation of Image Javascript

Question

I have 4 images connected to each other which form a big image. My task is to rotate the big image to a certain angle that is entered by the user. Now, to rotate the full image, I need to rotate the smaller connected images and then translate them accordingly so that the full images seems to be rotated.

But can't get the translation coordinates properly. Please help me out with that. Also, if there is any other way to do this, you can tell me that as well.

The code can be found here - https://jsfiddle.net/e4qp6btx/1/

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

Edit - I actually want to rotate and translate individual images rather than rotating the whole container.

I would just rotate the container. – Rickard Elimää Aug 09 '21 at 06:12 — Rickard Elimää, Aug 09 '21 at 06:12
And how would I do that? Can you help me with the code? – Manas Tyagi Aug 09 '21 at 06:26 — Manas Tyagi, Aug 09 '21 at 06:26

score 0 · Answer 1 · answered Aug 09 '21 at 06:46

I would just target and rotate the container instead. When trying on Mac Firefox, however, the smaller images seemed to get small spaces between them.

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

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

I would also use a CSS variable to set the angle, and then update the variable, instead of using inline style to change the transform: rotate value.

Finally, I would give the container a unique id.

Hi Rickard, the solution you have was helpful but I actually don't want to rotate the whole container. I actually want to rotate and translate the individual images. — Manas Tyagi, Aug 09 '21 at 07:32

Rickard Elimää · Answer 2 · 2021-08-09T17:59:56.217

Second solution.

Rotation originates from the center of the image by default. You can change this by setting transform-orgin. The following CSS will make the images rotate like they should, so you don't need to translate them. You should probably frankenstein together my two answers, because you barely need any code for your rotateImage() to work.

#img1 {
  transform-origin: bottom right;
}

#img2 {
  transform-origin: bottom left;
}

#img4 {
  transform-origin: top right;
}

#img3 {
  transform-origin: top left;
}

Do note: you mixed up the positions of #img4 and #img3, where #img4 comes before #img3, hence these images having the transform-origins switched around.

An added bonus:

I feel it's kinda wasteful to set the same value on four different elements, so I would suggest to use a CSS variable on .container to store the rotation value on all images. It would be easier to test different values in the Inspector if you do it like that.

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/

Hi Rickard, thanks for the solution. Let's say you have multiple images forming a big image. In that case you won't be able to do this thing. In that case you'll have to rotate each and every image and translate it as well. Can you figure out that translation formula? — Manas Tyagi, Aug 09 '21 at 22:23

Rotation and Translation of Image Javascript

2 Answers2