rotate] 이미지 회전시키기..

0)
HTML5 기준에서는 회전하는 이미지 표현이 가능한데요,
그걸 IE8 에서 가능한지 모르고 있다가

1)
뭘 하다가(?) 덜컥 찾았습니다.
그 덕에, 표준화(?)처럼 가능해졌네요.

DirectX 기술을 이용하는 것 같습니다만,
어차피, 적용되는 범위는 IE8 기준일테니까요.

*이미지 출처*
https://twitter.com/callumacrae/status/302570616085680128 

..

2)

<div id=pv></div>

<div style="width:500px; height:500px; overflow:hidden; position:relative;" onmousemove=posmove130914_1(event); >
<div id=posBack style="width:500px; height:500px; transform-origin:50% 50%; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -o-transform-origin:50% 50%; overflow:hidden; position:relative;" >
<img id=posFront width=100% height=100% src=http://cfs.tistory.com/custom/blog/42/429787/skin/images/regHexagon_https()__twitter.com_callumacrae_status_302570616085680128.png?=17535458760.8364444019255335
>
</div>
<div style="width:500px; height:500px; overflow:hidden; position:absolute; left:0px; top:0px; backkground-color:white; opacity:0; filter:Alpha(opacity=0);"></div>
</div>

<script>

var
  ov='progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'clip to original\', M11={lcosv}, M12={lsinvM}, M21={lsinv}, M22={lcosv}, Dx={Dx}, Dy={Dy})' 
// Dx, Dy : 회전체 표시 중심점 위치

, pob=document.getElementById('posBack')
// , pob=document.getElementById('posFront')
, pvv=document.getElementById('pv');
  ;

function posmove130914_1(ev){
  var xv;

  if (!ev) ev=event;

  xv=ev.offsetX?ev.offsetX:ev.layerX;

  pv.innerHTML=xv+' '+pob.style.filter;
  pob.style.filter=ov.replace(/{lsinv}/g, Math.sin(xv/500*3.14159*2)).replace(/{lcosv}/g, Math.cos(xv/500*3.14159*2)).replace(/{lsinvM}/g, -Math.sin(xv/500*3.14159*2)).replace(/{Dx}/, 250*(1-Math.sqrt(2)*Math.cos((xv/500+0.125)*3.14159*2))).replace(/{Dy}/, 250*(1-Math.sqrt(2)*Math.sin((xv/500+0.125)*3.14159*2)));
  pob.style.transform='rotate('+(xv/500*360)+'deg)';
  pob.style.webkitTransform='rotate('+(xv/500*360)+'deg)';
  pob.style.mozTransform='rotate('+(xv/500*360)+'deg)';
  pob.style.oTransform='rotate('+(xv/500*360)+'deg)';
  }
</script>

-- 새 창에 샘플 보여주기.. --

..

3)

..

4)
HTML5 에서는 *transform 에서 지원을 하니, 그대로 설정하면 됩니다만,

IE8 의 경우에는, HTML5 를 지원하기 이전이고,
나름(?)대로 filter 를 다량(?) 보유하고 있다는 장점(?)이 있었거든요..

filter 중에 DXImageTransform 같은 항목이 있을거라는 상상은 갔지만,
막상 적용하려고 보니, .. 일단 표준화를 시켜야할 것 같아서요.

String.replace 를 이용해서, 각 부분의 식을 표준화 해 본 내용입니다.

..

5)
개인적으로, 가장 어려웠(?)던 부분이, *transform-origin 적용하는 부분이었는데요,

Dx 와 Dy 를 어떻게 계산해야할지 한참을 헤매다가
겨우겨우(?) 찾은 식입니다.

회전하는 중심이 좌측상단인 것을 확인하고,
0도(회전 없음)에서의 중심을 좌측상단 통과하는 대각선 45도 중앙위치로 맞춘거죠.

원하는(?) 중심은 아니었습니다만,
중심축이 맞다는 점만 확인하시면 될 것 같습니다.

나중에, Dx, Dy 를 재조정하면 어떻게 계산해야할지.. 막막하네요..

..

6) 
그나저나, 원래는 저 회전체 이미지를 가지고 퍼즐풀이 도움닫기(?)를 하고 싶었는데요,

언제쯤에나 다시 손을 대볼지.. .. 까먹을 확률이 더 높을 것 같군요.

mouseover 의 경우도, 딱히 표준화 시킨 것이 아니라서,
회전체가 가능하다는 가능성만 보시면 될겁니다.

..

wantHate killofki@.