如何获取使用CSS旋转变换的元素的位置

Question

我在应用

rotate

过滤器后获取 div 的位置时遇到问题。我有一端的位置、高度和旋转角度，但在 MDN 上检查了这个过滤器的实际作用后（“[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]") 我还是不知道如何破解它。

示例：

我感兴趣的div是虚线。当时它的造型是：

left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);

（

top

/

left

描述其开始的位置。）我正在尝试获取其结束的

top

/

left

位置。

Answer 1

根据您当前的问题和您要求的确认：

var x = termin.top + Math.cos(angle) * div.height;
var y = div.left + Math.sin(angle) * div.height;

解决方案可以在另一个SO答案中找到，针对一个不同的问题，在这里进行了增强：

// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el) {
    return $.extend({
        width: el.outerWidth(false),
        height: el.outerHeight(false)
    }, el.offset());
};

// get rotated dimensions   
var transformedDimensions = function(el, angle) {
    var dimensions = getPositionData(el);
    return {
        width: dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)),
        height: dimensions.height + Math.ceil(dimensions.height * Math.cos(angle))
    };
};

这是一个 interactive jsFiddle，它为 getPositionData(); 功能提供

实时更新

。
您将能够在您控制的

CSS3 Rotation

过程结束时看到

top

和 left 值。

参考：   jsFiddle

状态更新：上面的jsFiddle适用于0-90deg，并且可以批准所有角度和不同的单位，例如rad、grad和turn。

Answer 2

尝试使用

element.getBoundingClientRect()

根据MDN：

从 Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0) 开始，CSS 变换的效果为 在计算元素的边界矩形时考虑。

Answer 3

您可以尝试使用这个：https://gist.github.com/hoandang/5989980 帮我解决了。