'CSS3'에 해당되는 글 1건
- 2010.12.16 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;
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() {
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;
//원래대로 ..
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)';
}
}
};
참고 사이트 :
'Develop > CLIENT SIDE' 카테고리의 다른 글
| Aptana ExtJs + JQuery Code assist 방법 (0) | 2011.10.19 |
|---|---|
| 자바스크립트의 나쁜 점들 (더글라스 클락포드) (0) | 2010.12.16 |
| 정규 표현식 (Regular Expression) (0) | 2010.12.16 |
| 가상 클래스와 가상 요소 (0) | 2010.12.16 |
| 선택자 (Selector) (0) | 2010.12.16 |
Recent Comment