CODEWITHSUNDEEP
javascriptcssrotation
Just Lucky Really
Just Lucky Really

Reputation: 1401

Getting CSS left and top when div is rotated

I'm trying to get the style.left and style.top of a rectangular div, after it has been rotated using style.transform=rotate(90deg).

I understand how the div is being rotated, with it being rotated around a 'transform point'. And I also understand that a div could be rotated by 45 degrees, so giving the new top/left of that would be awkward (In effect giving the bounding box left/top).

But back to the original question, rotating the rectangular div by 90 degrees, is there a way to get the 'new' left/top?

The reason I need this, is for a project im working on to upload images, allow the user to zoom, rotate etc, but currently having to do it with PHP to keep all the dimensions correct for the final image (Which is obviously bad, because I'm having to keep loading a new image once PHP has done the rotating/zooming etc)

I've also made a little jsfiddle showing that the top/left position doesn't change when it is rotated

Upvotes: 2

Views: 1946

Answers (1)

Just Lucky Really
Just Lucky Really

Reputation: 1401

Okay, thanks to the comment left above, I managed to throw together an answer.

Basically using:

newleft = parseInt(div.style.top) + Math.cos(90) * parseInt(div.style.height);
newtop = parseInt(div.style.left) + Math.sin(90) * parseInt(div.style.height);

after the div had been rotated.

I've updated my jsfiddle aswell, because the one in the comment above uses jQuery, but this way uses only javascript.

Upvotes: 2

Related Questions