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

Question

我在应用rotate过滤器后获取div的位置时遇到问题。我有一个端点的位置，它的高度和它旋转的角度，但在检查了这个滤波器实际上对MDN的影响（“[cos（角度）sin（角度）-sin（角度）cos（角度） 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))
    };
};

这是一个交互式 jsFiddle，为getPositionData();函数提供实时更新。
您将能够看到top和您控制的 CSS3轮播流程结束时的left值。

参考： jsFiddle

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

Answer 2

尝试使用element.getBoundingClientRect()

根据MDN：

  

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