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

Question

我在使用rotate滤镜后无法获取

的位置。我有一端的位置、高度和旋转角度，但是在查看MDN上这个滤镜的实际作用("[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]")后，仍然不知道如何解决它。

示例：

我感兴趣的

是虚线。此时的样式为：

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

（top/left描述了其开头的位置）。我想要获取其结尾的top/left位置。

- sasklacz

---

在刷新了我的数学知识之后，我想到了这样的解决方案：var x = termin.top + Math.cos(angle) * div.height; var y = div.left + Math.sin(angle) * div.height; 有人能确认这是否是正确的解决方案吗？ - sasklacz

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))
    };
};

这是一个交互式的jsFiddle，可以实时更新getPositionData();函数的位置数据。
您将能够在您控制的CSS3旋转过程结束时看到top和left值。

参考：   jsFiddle

状态更新：上述jsFiddle适用于0-90度，并可针对所有角度和不同单位（如弧度、梯度和转角）进行改进。

- arttronics

Answer 2

尝试使用element.getBoundingClientRect()

根据MDN：

从Gecko 12.0（Firefox 12.0 / Thunderbird 12.0）开始，在计算元素的边界矩形时，会考虑CSS transforms的影响。

- pozs

---

我们知道哪些其他浏览器在使用 getBoundingClientRect 时考虑了变换吗？最重要的是：IE 从哪个版本开始支持？它能在 IE9 中工作吗？ - Jimbo Jonny

@JimboJonny 根据我的测试，似乎IE9也会考虑变换（但将结果四舍五入为整数像素）。IE10的工作方式与其他浏览器相同（不会将结果四舍五入）。 - pozs