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@.
'image area' 카테고리의 다른 글
부분보기] 재능 결여자를 위한 그림 연습 5.. (0) | 2013.11.13 |
---|---|
imageResize] 두개 이상의 이미지 크기 줄이기.. (0) | 2013.09.16 |
filter & position in IE8] filter 적용범위에 관한 내용입니다. (0) | 2012.12.06 |
줄기준 블럭식 배치]..를 Excel 과 붙여넣기용으로 넣어본 Sample.. for IE8 (0) | 2012.12.03 |
css] 구구단..? (0) | 2012.11.29 |