旋转 div 时获取 CSS 左上角答案

【问题标题】：Getting CSS left and top when div is rotated旋转 div 时获取 CSS 左上角
【发布时间】：2014-07-17 01:05:56
【问题描述】：

在使用 style.transform=rotate(90deg) 旋转矩形 div 后，我正在尝试获取 style.left 和 style.top。

我了解 div 是如何旋转的，它围绕“变换点”旋转。而且我也知道一个 div 可以旋转 45 度，所以给它新的顶部/左侧会很尴尬（实际上是给边界框左侧/顶部）。

但回到最初的问题，将矩形 div 旋转 90 度，有没有办法让“新”左/上？

我需要这个的原因是，我正在处理一个上传图像的项目，允许用户缩放、旋转等，但目前必须使用 PHP 来保持最终图像的所有尺寸正确（即显然很糟糕，因为一旦 PHP 完成了旋转/缩放等操作，我必须继续加载新图像）

我还做了一点jsfiddle 显示旋转时顶部/左侧位置不会改变

【问题讨论】：

也许这就是你要找的东西：stackoverflow.com/questions/11229040/…

标签： javascript css rotation

【解决方案1】：

好的，感谢上面留下的评论，我设法拼凑了一个答案。

基本使用：

newleft = parseInt(div.style.top) + Math.cos(90) * parseInt(div.style.height);
newtop = parseInt(div.style.left) + Math.sin(90) * parseInt(div.style.height);

在 div 旋转之后。

我也更新了我的jsfiddle，因为上面评论中的那个使用了jQuery，但这种方式只使用了javascript。

【讨论】：