旋转后获取相对x和y div
所以这里是我希望我在数学课上更多关注的一点：
http://i.imgur.com/noKxg.jpg
我有一个很大的容器div，里面有一些旋转的内容div。
我想要做的是通过在视口中移动Main Div来在子div之间生成动画。 如果我只是基于简单的x / y（上/左）计算来做这件事，那真的很容易，但是当涉及轮换时，我的数学就会崩溃。
我尝试了一些东西，并没有真正破解它。
以下是我的结果排序的简化版本，请随时拨动：
http://jsfiddle.net/dXKJH/3/
我真的无法弄清楚这一点！
[编辑]
我将这个解决方案作为首选项，因为我已经开发了一个使MSE6 +可以使用旋转插件的方法。
我不得不说，虽然我遵循所有的数学函数，并且它们看起来很干净，但结果并不是像素完美的，但这与PI计算有关吗？ 看起来越大越好，我把这些盒子放在左上角的可能性就越小。 奇怪。
也有人可以提醒我，如果角度超过45度，我需要做什么动作，我找不到一个参考，我从几年前的数学课记得这个时候有4个象限或什么的......我怎么样希望我付出更多的关注.. :-)
非常感谢您迄今为止的所有帮助！
那么，这是我得到了多少...我做了一切更小，以便更好地看到div的最终位置，并且因此也添加了滚动条。
重要的一点：
Math.sin / Math.cos需要弧度，而不是度数 (0, 0) （这适用于主div和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)
}
我想建议一种不同的方法：
这可能更容易，并导致代码更简单（更易维护）。 请注意，移动和旋转可以是动画效果。 此外，如果您使用翻译而不是左/顶部样式，由于变换原点更改，此解决方案将变得更加复杂。
它看起来像你试图模仿苹果的iPhone网站：http://www.apple.com/iphone/。 我在这里模拟了这种技术：
http://jsfiddle.net/Yw9SK/2/ （使用Webkit转换）
这真的不需要太多的数学，不要过度设计它。 你只需要取消孩子<div>的旋转，并调整它们的宽度/高度和容器<div>偏移量。
以下是如何做到这一点：
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
因为“舞台”以集装箱顶部为中心，所以新的变形也将集中在舞台上。 （与正方形相比，对矩形进行这种操作并不困难）。因此，要应用于容器<div>变换是：
transform: rotate(-120eg) translateX(220px) translateY(-100px)
冲洗并重复其他子元素，并相应地通过它们进行转换。
这个JSFiddle只是如何完成这个的一个例子。 它不是一个设计得很好的植入物。 一个更优化的解决方案会有一个转换延迟或动画延迟（而不是setInterval），然后监听'transitionEnd'或'animationEnd'事件。
我肯定会建议不要试图以编程方式即时计算新的位置和旋转（虽然你可以，然后你只需要从JS中的.style属性中获取这些值）。 我建议您有需要预先定义的翻译/旋转（如我的示例中所示，尽管它们应该在CSS中），并将它们以正确的顺序应用于容器。 这将确保过渡快速顺畅。