Question

I have one two divs (rectangle) that have each the following transforms applied on:

translate(100px, 100px) scale(2) rotate(20deg)

Those divs are identical except the point of origin varies, one have (0, 0) and the other have (64px, 64px). You can see them here:
http://jsfiddle.net/L7ksC/2/

How can I get the left and top difference between those tho divs?
It can be just a math solution rather then a Javascript one.

Thank you.

Answer 1

I have a solution in a jsfiddle.

I used the position method from jquery, to get top and left. For some angles of rotation the left value will not correspond to the top left corner, but a little trigonometry can sort that out. Please let me know if anything in the jsfiddle is unclear, I’d be happy to explain further.

Keep in mind that the left most point of a box is not the same as the left coordinate of the top point for a 20 degree rotation. In order to calculate the left coordinate I wrote this code:

  var scale    = 2;
  var p_height = 128;
  var rotation = 20;

  var add_to_left =scale*p_height*Math.sin(rotation*Math.PI/180);

The formula calculates the horizontal distance between the left position and the left coordinate of the top corner. Here is a much simplified fiddle showing the right triangle I am talking about.