Javascript 获取旋转后的相对x和y div

因此，我希望我在数学课上多注意一点：

我有一个大的容器div，里面有几个旋转的内容div

我要做的是通过在视口中移动主Div在子Div之间设置动画。如果我只是基于简单的x/y（上/左）计算，这将非常容易，但是当涉及旋转时，我的数学就崩溃了

我试过一些东西，但还没有真正破解

这是我的结果排序的简化版本，请随意修改：

我真的搞不懂

[编辑]

我将此解决方案作为首选方案，因为我已经找到了一种让rotate插件与MSIE6+一起工作的方法

然而，我不得不说，尽管我遵循了所有的数学函数，它们看起来很干净，但结果不是像素完美的，这与PI计算有关吗？看起来，我让盒子越大，间隔越远，它们与左上角匹配的可能性就越小？奇怪

还有谁能提醒我，如果角度超过45度，我需要做什么样的触发，我找不到一个参考，我记得几年前数学课上有四个象限或其他什么的时候。。。rr我多么希望我能多加注意…-）

---

非常感谢你到目前为止所给予的帮助

好吧，这就是我走了多远。。。为了更好地看到

div

s的结尾，我将所有内容都缩小了，并为此添加了滚动条

要点：

• Math.sin

  /

  Math.cos

  需要弧度，而不是度
• CSS围绕元素的中点旋转，而不是

  （0，0）

  （这适用于主

  div

  和框

  div

  s；首先平移

  -width/2

  ，

  -height/2

  ，旋转，然后再平移回来）
• 使用

  parseInt（x，10）

  确保使用的是base 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)
}

---

我想提出一种不同的方法：

从起始状态移动到div-2（使用左/顶样式重新定位主div）

将主Div的变换原点设置为视图中心（也是Div-2的中心）

按与Div-2相反的量旋转主Div（Div-2应正确居中）

将主Div旋转回0度

移到3区

将主Div的变换原点设置为视图中心（也是Div-3的中心）

按与Div-3相反的量旋转主Div（Div-3应正确居中）

冲洗并重复

---

这可能更容易，并导致代码不那么复杂（更易于维护）。请注意，移动和旋转可以设置动画。此外，如果您使用翻译而不是左/顶样式，由于转换来源的更改，此解决方案将更加复杂。

看起来您正在尝试模仿苹果的iPhone网站：。我在这里模拟了这种技术：

（使用Webkit转换）

这真的不需要太多的数学，不要过度设计它。您只需取消子对象的旋转，并调整其宽度/高度以及与容器的偏移量

以下是如何做到这一点：

container width: 500  height: 500  rotation: 0       top: 0    left: 0
child     width: 90   height: 90   rotation: 120deg  top: 330  left: 0

为确保旋转正确，容器必须获得子容器的负旋转：

child rotation: 120deg  --> container rotation: -120deg

要使子对象在视图中居中，我们需要从容器宽度中减去其宽度，除以2（以保持其居中），然后减去任何偏移。同样的情况也发生在身高上：

Width                                   Height
 500    (container width)                 500    (container height)
- 60    (child width)                    - 40    (child height)
----                                     ----
 440                                      460
   /    (divide by 2                        /    (divide by 2
   2     to keep it centered)               2     to keep it centered)
----                                     ----
 220                                      230
-  0    (subtract the left: offset)      -330    (subtract the top: offset)
----                                     ----
 220    translateX                       -100    translateY

因为“阶段”集中在容器顶部，所以新的转换也将集中在阶段内。（与正方形相比，矩形不难实现这一点。）因此，我们要应用于容器的变换是：

transform: rotate(-120eg) translateX(220px) translateY(-100px)

对其他子元素进行冲洗和重复，并相应地进行转换

---

这个JSFIDLE只是如何实现这一点的一个示例。这不是一个设计很好的植入。更理想的解决方案是使用过渡延迟或动画延迟（而不是setInterval），然后侦听“transitionEnd”或“animationEnd”事件

---

我绝对建议不要在运行中以编程的方式计算新的位置和旋转（尽管可以，然后只需从JS中的

.style

属性获取这些值）。我建议您预先定义所需的平移/旋转（如我的示例所示，尽管它们应该是CSS格式的），并简单地将它们以正确的顺序应用于容器。这将确保转换快速平稳。

Math.sin

/

cos

需要弧度，而不是度数。感谢这一点，是的，类似的东西，但不是iphone的东西，诺尔喜欢这种导航：喜欢webkit转换，可能是未来的事情，但我需要它尽可能交叉兼容。检查该页面的代码，它们实际上是通过jQuery使用特定于浏览器的转换：）它们还在数组中保留所有正确的平移X/Y位置，并在单击指定链接后应用它们。。。就像我的例子所展示的那样。