Получение верхнего и левого от нормального состояния масштабируемого элемента CSS с помощью jQuery?

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