Search code examples
javascriptmathtransformscale

CSS Scale, then resize to original

I'm creating a "zoom" effect with a div with overflow:scroll. Here's my dillema:

I use the following:

$('#object').css({ 'transform':'scale(50)' });

Which works beautifully, but now I would like to mathematically resize the element to it's original width/height (keeping the scale at 50%, or whatever the value might be...)

$('#object').css({ 'width': ?+'px', 'height': ?+'px' });

Pretty sure this is a math issue, I can get close with the following:

new_width = parseInt(origWidth) + parseInt(Math.round(origWidth*((100-zoomScale)/100)));
new_height = parseInt(origHeight) + parseInt(Math.round(origHeight*((100-zoomScale)/100)));

Any help would be appreciated!

Solution

  • Your math is wrong.

    700 * 0.5 = 350

    But... if 700 represent 50%, then 100% will be 1400 and not 700 + 350...

    So:

    700 * 2 = 1400

    supose my vars are that the math to get the oposite keep zoom will be:

    (1/0.5) * 700

    The math formula will be:

    (1/(zoomScale/100)) * originalValue

    For the original values, you can use the css width or height they will still the pixel original value, the modified by zoom value will be the clientWidth, clientHeight, offsetWidth and offsetHeight element properties.