使用 jQuery 获取 CSS 缩放元素正常状态的顶部和左侧？

Question

我正在悬停时缩放元素，

 transform: scale(1.2);

现在我需要获得悬停时的顶部和左侧位置，但它给了我缩放位置的顶部和左侧..有道理，但我想要正常状态的顶部和左侧？有没有一种简单的方法可以得到这个？

Answer 1

根据 transform-origin 和元素的对齐方式，您可以通过将宽度和高度乘以scaleX和scaleY的乘数来计算附加偏移量。

例子：

var element = $("#myDiv");
var prefixes = ["-moz-", "-webkit-", "-o-", "-ms-", ""];
var transX = 1, transY = 1, originX = .5, originY = .5, match;
for(var i=0; i<prefixes.length; i++){
    var prefix = prefixes[i];
    var transform = element.css(prefix+"transform");
    if(!transform) continue;
    match = transform.match(/scale\((\d+),(\d+)\)/i);
    if(match){
        transX = match[1];
        transY = match[2];
    } else if(match = transform.match(/scale\((\d+)\)/i)){
        transX = transY = match[1];
    } else if(match = transform.match(/scale[XY]\(\d+\)/i)){
        transX = transform.match(/scaleX\((\d+)\)/i);
        transX = transX ? transX[1] : 1;
        transY = transform.match(/scaleY\((\d+)\)/i);
        transY = transY ? transY[1] : 1;
    }
    var origin = element.css(prefix+"tranform-origin").match(/(\d+)% (\d+)%/); /*Default: 50% 50%*/
    if(origin){
        originX = origin[1]/100;
        originY = origin[2]/100;
    } else {
        //Investigate yourself. What would be the value if it doesn't exist?
    }
}

if(match){ /*A match has been found, thus transX and transY are defined*/
    /*Width * originX * scaleY =
        width * [relative affected part of element] * [scale factor]
        = adjusted offset*/
    var minusLeft = element.width() * originX * scaleX;
    var minusTop = element.height() * originY * scaleY;
    /*Do something, for example:*/
    element.css("left", "-="+minusLeft+"px");
    element.css("top", "-="+minusTop+"px");
}