具有不同原点的转换 div 之间的区别答案

【问题标题】：Difference between a transformed div with various point of origin具有不同原点的转换 div 之间的区别
【发布时间】：2011-08-25 10:17:41
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

我使用 jquery 中的position 方法来获取顶部和左侧。对于某些旋转角度，left 值不会对应于左上角，但是一点三角函数可以解决这个问题。如果 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，显示了我正在谈论的直角三角形。

【讨论】：

这是一个优雅的解决方案，谢谢。我唯一不明白的是我在 css 中看不到的“-10”填充。谢谢
在 jsfiddle 页面本身的 CSS 中，结果框内有 10px 的填充，这不是我可以控制的。删除“-10”将给出 p0 和 p1 相对于其父容器的确切位置。当我试图解决这个问题时，我发现将框在旋转之前的位置与它们的平移值相同是很有帮助的，这需要补偿填充。