Question

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

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

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

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

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

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

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

我真的无法弄清楚这一点！

[编辑]

我将这个解决方案作为首选项，因为我已经采用了一种方法使旋转插件与MSIE6 +配合使用。

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

也可以有人提醒我，如果角度超过45度，我需要做什么触发，我找不到参考我记得这几年前数学课时有4个象限或者什么......如何我希望我多关注..： - ）

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

Answer 1

嗯，这就是我得到了多远......我把所有东西都做得更小，以便更好地看到div最终的位置，并且还因此添加了滚动条。

重点：

Math.sin / Math.cos需要弧度，而非度数
CSS围绕元素的中点旋转，而不是(0, 0)（这适用于主div和框div;首先翻译-width / 2，{{ 1}}，旋转，然后翻译回来）
使用-height / 2确保您使用的是基数10

最终代码：http://jsfiddle.net/pimvdb/dXKJH/10/。这个解决方案需要HTML中的硬编码位置和旋转，因为parseInt(x, 10)有一些旋转元素的怪癖。

.css

Answer 2

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

从开始状态移动到div-2（使用左/顶部样式重新定位主要部分）
将主要Div的变换原点设置为视图中心（也是div-2的中心）
使用相反数量的div-2旋转主Div（div-2应正确居中）
将主分区旋转回0度。
转到div-3
将主要Div的变换原点设置为视图中心（也是div-3的中心）
使用相反数量的div-3旋转主Div（div-3应正确居中）
冲洗并重复

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

Answer 3

看起来你正试图模仿Apple的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中），并且只需按正确的顺序将它们应用到容器中。这将确保过渡快速平稳。

旋转后获取相对x和y div

3 个答案: