Get relative x and y div after rotation

Question

So here's one which I wished I paid more attention in maths class for:

http://i.imgur.com/noKxg.jpg

I have a big container div and inside of this I have a few content divs which are rotated.

What I'm trying to do is animate between the child divs by moving the Main Div around in the viewport. This would be really easy if I was just doing it based upon simple x/y (top/left) calculations, however when there's rotation involved, my maths just breaks down.

I have tried a few things and haven't really cracked it.

Here's a simplified version of my results sort far, please feel free to fiddle:

http://jsfiddle.net/dXKJH/3/

I really can't figure this out!

[EDIT]

I'm going with this solution as a preference simply because I've already worked a way of making the rotate plugin work with MSIE6+.

Howver I have to say that although I follow all the math functions and they seem clean the results are not pixel perfect is this something to do with a PI calculation? It seems that the bigger and more spaced out i make the boxes the less likely they are to match up to the top left? Oddness.

Also can anyone remind me of what trig thing I need to do if the angle is more than 45 degress, I can't find a reference I remember this from maths class years ago when there were 4 quadrants or something... rr how i wish i paid more attention.. :-)

Thank you hugely for all the help so far!!

Answer 1

Well, this is how far I got... I made everything smaller so as to see better where the divs end up, and also added scrollbars for this reason.

Important points:

• Math.sin / Math.cos require radians, not degrees
• CSS rotates around the midpoint of the element, not (0, 0) (this applies to both the main div and the box divs; first translate -width / 2, -height / 2, rotate, and then translate back)
• Use parseInt(x, 10) to make sure you're using base 10

Final code: http://jsfiddle.net/pimvdb/dXKJH/10/. This solution needs hardcoded positions and rotations in HTML as well since .css was having some quirks with rotated elements.

$("#div-1").rotate("-10deg");
$("#div-2").rotate("10deg");
$("#div-3").rotate("15deg");
$("#div-4").rotate("75deg");

$("#main").click(function() {
    console.log($('body').scrollLeft(), $('body').scrollTop());
});

$("a").click(function(e){
    goTo($(this).attr("id").substring(4,5));
    return false;
});


function n(x) {
    return parseInt(x, 10);
}

function sin(x) {
    return Math.sin(x / 180 * Math.PI);
}

function cos(x) {
    return Math.cos(x / 180 * Math.PI);
}

function rotate(x, y, a) {
    var x2 = cos(a) * x - sin(a) * y;
    var y2 = sin(a) * x + cos(a) * y;
    return [x2, y2];
}


var offsets = [null,
              [0,100,-10],
              [100,200, 10],
              [300,100, 15],
              [400,100, 75]].map(function(v) {
                  if(!v) return v;
                  var rotated = rotate(-50, -50, v[2]);
                  rotated[0] += v[0] + 50;
                  rotated[1] += v[1] + 50;
                  return rotated.concat(v[2]);
               });


function goTo(num){
    var obj = $("#div-" + num);
    var angle = -n(obj.rotate());
    var pointX = offsets[num][0] - 500;
    var pointY = offsets[num][1] - 500;
    var rotated = rotate(pointX, pointY, angle);
    var newX = rotated[0] + 500;
    var newY = rotated[1] + 500;

    $("#main").animate({rotate: angle + "deg"}, 1000);  
    $("body").animate({scrollLeft: newX,
                       scrollTop:  newY}, 1000)
}