如何获得用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 Answer 中找到不同的问题，在此进行了增强：

// 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(); 函数提供实时更新。
您将能够在以下位置看到top 和left 值您控制的 CSS3 Rotation 进程结束。

参考：  jsFiddle

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

Answer 2

尝试使用element.getBoundingClientRect()

根据MDN：

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