zoom] transform-scale 처럼 적용하고 싶었지만, 실패..

1)
이번에 게시한 내용은
zoom 으로 transform-scale 처럼 구현해보려다 실패한 예시입니다.

지난번에 적은
http://killofki.tistory.com/entry/zoom-transform-scale-확대축소의-법칙을-표준화하고-싶었습니다
를 찾는 과정에서,

어떻게든 확대방법을 표준화하려고 테스트해보던 방법이죠.
(원래는, source 부분부분 수정해가면서 테스트했지만, 보여줄 땐 그렇게 하기 미안(?)하니까요..)

...

2)

<DIV style="POSITION: relative; BACKGROUND-COLOR: green; WIDTH: 410px; HEIGHT: 338px; OVERFLOW: hidden" id=div120821_1>
&nbsp;
</DIV>
<SCRIPT>
var
  presszoom120821_1;
(function () {
var
  lastup, lastdown
  , rvV=/0/g
  , pressValue=
'<'+'table border=0 cellpadding=0 cellspacing=0 width=410 height=338><'+'tr><'+'td align=center valign=center>'
+'<'+'div style="zoom:{zoomup}; -moz-transform:scale({zoomup}); -o-transform:scale({zoomup}); width:205px; height:169px; overflow:hidden; background-color:green; position:relative;">'
+'<'+'table border=0 cellpadding=0 cellspacing=0 width=205 height=169><'+'tr><'+'td align=center valign=center>'
+'<'+'div style="background-image:url(http://cfs.tistory.com/custom/blog/42/429787/skin/images/_img_1.jpg?=3556697930.8255318908249388); '
+' width:256px; height:211px; overflow:hidden; zoom:{zoomdown}; -moz-transform:scale({zoomdown}); -o-transform:scale({zoomdown}); position:relative;"></'+'div>'
+'<'+'/td></'+'tr></'+'table>'
+'</'+'div>'
+'</'+'td></'+'tr></'+'table>'
;
function rv(v) { var i, ar=arguments, arl=ar.length;
  for (i=1; i<arl; i+=2) {
    rvV.compile(ar[i], "g");
    v=v.replace(rvV, ar[i+1]);
    }
  return v;
  }
presszoom120821_1=function (upscale, downscale) {
if (upscale) lastup=upscale; else upscale=lastup;
if (downscale) lastdown=downscale; else downscale=lastdown;
// alert(upscale+' '+downscale); // for debug.. about send arguments from input tag..

document.getElementById('div120821_1').innerHTML = rv(pressValue, '{zoomup}', upscale, '{zoomdown}', downscale);
  }
presszoom120821_1(2, 0.8);
  } )();</SCRIPT>
<INPUT onclick=presszoom120821_1(1.5); value=zoomup1.5 type=button>
<INPUT onclick=presszoom120821_1(2.0); value="zoomup2.0 (default) " type=button>
<INPUT onclick=presszoom120821_1(2.5); value=zoomup2.5 type=button>
<br />
<INPUT onclick=presszoom120821_1(0,0.7); value=zoomdown0.7 type=button>
<INPUT onclick=presszoom120821_1(0,0.8); value="zoomdown0.8 (default)" type=button>
<INPUT onclick=presszoom120821_1(0,0.9); value=zoomdown0.9 type=button>

...

3)

 

...

잘 안나와서(?), 새 창 띄우는 쪽으로도 보여드립니다.

-- Sample on New Window --

원 source 부분은
pressValue 값에 있는 내용이 거의 전부입니다.

내용에도 있지만, 

zoomup 은 2, 
zoomdown 은 0.8

이었습니다.
나머지 내용들은 테스트를 위해 추가한거에요..

...

3)
구현하려던 내용은

table 의 td 특성을 받아(?)서,
transform-scale 에서의 기본 특성인 "가운데 기준으로 zoom" 기능을

IE, chrome, safari 에서
zoom 을 쓰는 방법으로도 구현하려던 거였죠.

아시다시피(?), transform 씨리즈에서는
transform-origin:50% 50%; 형태가 기본값입니다.. (아마도요..)

그런데, 막상 테스트를 해보니,
Firefox, Opera 에서 보여지는 위치가 다른겁니다.
뭐랄까요..

transform 의 입장에서는
"기존에 가지고 있는 공간"을 기존 값들이 사용하고있는데,
사용하는 공간이 커진다고 신고할 필요가 있는가..라는거죠.

변신(?)을 해도, 허상이라고 할까요..

그래서그런지,
무조건(?) 좌측 공간이 남습니다.

...

4) 
테스트한 내용은 여기까지입니다.

zoomdown 쪽 값에 1.1 등을 넣어서 테스트해볼껄..하는 미련도 있긴 합니다만,
.. 목적(?)이 불가능하다는(zoom 은 공간을 더(?) 가지게하는 형태입니다..) 것을 알았으니까요.

easyBow killofki@.