블로그 이미지

Rurony's Training Gym

Rurony의 트레이닝 도장! by Rurony


'CSS3'에 해당되는 글 1건

  1. 2010.12.16 CSS3 Transform & Matrix Filter (개체 회전)

CSS3 Transform & Matrix Filter (개체 회전)

CSS3 Transform & Matrix Filter를 활용하여 크로스 브라우징되는 개체(이미지 등)의 중심점 회전 예제.

CSS3 transform
        - IE 브라우저에서는 아직 지원되지 않는다. (Matrix Filter 사용)
          - 크롬, 사파리 : -webkit-transform
          - 파이어폭스 : -moz-transform
          - 오페라 : -o-transform

Supported Transform Functions
        - rotate : 회전
          - scale : 크기
          - skew : 기울기
          - translate : 이동

#transformedObject {
border : 1px solid red;
text-size : 16px;
width: 220px;
height: 70px;
-moz-transform: rotate(15deg) translateX(230px) scale(1.5);
-o-transform: rotate(15deg) translateX(230px) scale(1.5);    
-webkit-transform: rotate(15deg) translateX(230) scale(1.5);    
transform: rotate(15deg) translateX(230px) scale(1.5);
/* IE Only */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand');
margin-left: 156px;
margin-top: -2px;
}

rotate로의 회전은 회전축이 중심에 있다. IE
Matrix Filter의 사용 시에 회전축을
중심축으로 개체를 이동시킨 후 다시 원래 좌표로 이동 시켜 해결함.

var pi = Math.PI;
var degToRad = function(x) { return ( x/(360/(2*pi)) ); }
var radToDeg = function(x) { return ( x*(360/(2*pi)) ); }
var setPosXY = function() {
$('poX').value = parseInt($('img').style.left) + parseInt($('img').offsetWidth)/2;
$('poY').value = parseInt($('img').style.top) + parseInt($('img').offsetHeight)/2;
};

var rotate = function(name) {
var angle = $('angle').value;
var el = $(name);

var rad = degToRad(angle);
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
if (isIE) {
//중심점 이동
$('img').style.left = $('poX').value + "px";
$('img').style.top = $('poY').value + "px";
el.style.filter = 'progid:DXImageTransform.Microsoft.Matrix()';
el.filters.item('DXImageTransform.Microsoft.Matrix').SizingMethod = 'auto expand';
el.filters.item('DXImageTransform.Microsoft.Matrix').FilterType = 'bilinear';
el.filters.item('DXImageTransform.Microsoft.Matrix').M11 = costheta;
el.filters.item('DXImageTransform.Microsoft.Matrix').M12 = -sintheta;
el.filters.item('DXImageTransform.Microsoft.Matrix').M21 = sintheta;
el.filters.item('DXImageTransform.Microsoft.Matrix').M22 = costheta;
//원래대로 ..
$('img').style.left = parseInt($('img').style.left) - parseInt($('img').offsetWidth)/2 + 'px';
$('img').style.top = parseInt($('img').style.top) - parseInt($('img').offsetHeight)/2 + 'px';
setPosXY();
} else {
if (typeof el.style.MozTransform !== 'undefined') {
el.style.MozTransform = 'rotate('+angle+'deg)';
} else if (typeof el.style.WebkitTransform !== 'undefined') {
el.style.WebkitTransform = 'rotate('+angle+'deg)';
} else if (typeof el.style.OTransform !== 'undefined') {
el.style.OTransform = 'rotate('+angle+'deg)';
}
}
};

참고 사이트 :

Top

prev 1 next