JavaScript/jQuery : How to get actual original position of an element (DIV) after it's been rotated

标签 javascript jquery rotation position offset

我有一个使用 -webkit-transform:rotate(45deg) 旋转的 div 元素。如果我尝试像这样旋转后访问它的当前位置

var x = $('#tap-area').offset().left;
var y = $('#tap-area').offset().top;

它返回的不是原始左上角的实际值,而是整个 div 边界框的左上角(物理上最远的左上角,在 DIV 之外)。

如何计算/获取div旋转后的原始左上角

例如: 如果我将其旋转 90 度,我现在想要获得的值将位于右上角。 如果我将其旋转 180 度,我现在想要获得的值将是右下角。

我需要这个,所以我可以设置另一个 DIV 元素以始终保持附加到元素的原始左上角,以便它会根据其旋转方式更改其位置。

谢谢。

最佳答案

您始终可以使用以下方法获取元素的绝对位置:

<element>.getBoundingClientRect()

这将为您提供以屏幕左上角为原点的 AABB(轴对齐边界框,或最小-最大-框)。 (MDN)

如果您需要访问元素左上角的位置,您也可以旋转其原始位置向量,这是一个简单的矩阵乘法。您应该记住,旋转中心默认是元素的中心,但也可以使用 css 将其设置为不同的位置。

祝你好运!

关于JavaScript/jQuery : How to get actual original position of an element (DIV) after it's been rotated,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15924192/

相关文章:

javascript - 在 Ajax 接触加载后切换 Bootstrap 模式

javascript - 将toDataUrl base64字符串转成页面上的图片

Python 列表轮换

javascript - 是否可以将文件对象保存在 LocalStorage 中,然后在用户返回页面时通过 FileReader 重新加载文件?

jquery - 将信用卡验证添加到我的付款表单

iphone-sdk-3.0 - UITabBarController、MoreNavigationController 和设备轮换的 chalice

css - 提高 css3 文本旋转质量

javascript - 用主干覆盖同步值的简单方法

javascript - Ember.js 在管理 View 集(和模型)方面有意见吗?

javascript - 在 JavaScript 中创建对象