具有不同起源点的变换div之间的差异

Question

我有两个div（矩形），每个div都应用了以下变换：

translate(100px, 100px) scale(2) rotate(20deg)

这些div是相同的，除了原点不同，一个有（0,0），另一个有（64px，64px）。你可以在这里看到它们： http://jsfiddle.net/L7ksC/2/

如何获得这些div之间的左右差异？ 它可以只是一个数学解决方案，而不是一个Javascript。

谢谢。

Answer 1

我在a jsfiddle中有一个解决方案。

我使用jquery中的position方法来获得顶部和左侧。对于某些旋转角度，左侧值不对应于左上角，但是一点三角法可以对其进行排序。如果jsfiddle中的任何内容不清楚，请告诉我，我很乐意进一步解释。

请记住，框的最左侧点与20度旋转的顶点的左侧坐标不同。为了计算左坐标，我写了这段代码：

  var scale    = 2;
  var p_height = 128;
  var rotation = 20;

  var add_to_left =scale*p_height*Math.sin(rotation*Math.PI/180);

公式计算左上角和左上角坐标之间的水平距离。这是much simplified fiddle显示我正在谈论的正确三角形。