旋转后获取相对x和y div

Question

所以这是我希望我在数学课上更加注意的一个:

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

我有一个大容器div,在里面我有一些旋转的内容div.

我想要做的是通过在视口中移动主要Div来在子div之间进行动画制作.如果我只是基于简单的x/y(上/下)计算来做这件事,那将非常容易,但是当涉及到旋转时,我的数学就会崩溃.

我尝试了一些事情并没有真正破解它.

这是我的结果排序的简化版本,请随意小提琴:

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

我真的想不出这个!

[编辑]

我将这个解决方案作为首选项,因为我已经采用了一种方法使旋转插件与MSIE6 +一起工作.

不过我必须说,虽然我遵循所有的数学函数并且它们看起来很干净但结果不是像素完美的,这与PI计算有关吗？似乎更大更多的间隔我使盒子与左上角相匹配的可能性更小？奇怪.

任何人都可以提醒我,如果角度超过45度,我需要做什么触发,我找不到参考我记得这几年前数学课时有4个象限或什么... rr我怎么样希望我多关注.. :-)

非常感谢你们迄今为止所有的帮助!!

Answer 1

好吧，这就是我已经走了多远......我把所有东西都变小了，以便更好地看到divs 的最终位置，并且因此还添加了滚动条。

要点：

• Math.sin/Math.cos需要弧度，而不是度数
• CSS围绕元素的中点旋转，而不是(0, 0)（这适用于 maindiv和 box div；先平移-width / 2、-height / 2旋转，然后再平移回来）
• 用于parseInt(x, 10)确保您使用的是 10 进制

最终代码： http: //jsfiddle.net/pimvdb/dXKJH/10/。该解决方案还需要在 HTML 中硬编码位置和旋转，因为.css旋转元素存在一些怪癖。

$("#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)
}