CSS Scale, затем измените размер до оригинального

Question

Я создаю эффект «увеличения» с помощью div с переполнением: прокрутка. Вот моя дилема:

Я использую следующее:

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

Это прекрасно работает, но теперь я хотел бы математически изменить размер элемента до его первоначальной ширины / высоты (при сохранении масштаба на уровне 50% или любого другого значения ...)

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

Уверен, что это математический вопрос, я могу подобрать следующее:

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

Любая помощь будет оценена!

Answer 1

Ваша математика неверна.

700 * 0.5 = 350

Но ... если 700 представляет 50%, тогда 100% будет 1400, а не 700 + 350 ...

Итак:

700 * 2 = 1400

Предположим, что мои переменные предполагают, что математика для получения масштабирования опозита будет:

(1/0.5) * 700

Математическая формула будет:

(1/(zoomScale/100)) * originalValue

Для исходных значений вы можете использовать css width или height, они по-прежнему будут исходным значением пикселя, измененным значением масштаба будет свойства элемента clientWidth, clientHeight, offsetWidth и offsetHeight.