CSSの縮尺を変更してから元に戻す

Question

divをオーバーフロー：スクロールして「ズーム」エフェクトを作成しています。

美しく働く

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

が、今私はそれが元の幅/高さ（50％規模を維持、または何だと数学的要素のサイズを変更したい：私は以下を使用

：ここに私のdillemaです値は、これが数学の問題です

$('#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 

は私のVARSは数学がすることですsupose oposite keepズームは次のようになります：

(1/0.5) * 700 

数学式は次のようになります。元の値について

(1/(zoomScale/100)) * originalValue 

が、あなたはそれらが依然としてピクセル元の値が、ズーム値によって修飾clientWidth、clientHeight、offsetWidthとoffsetHeightなりますcsswidth又はheightを使用することができ要素のプロパティ。