CSS3 엘리먼트 변형2D (transform)

CSS3 엘리먼트 변형2D (transform)

엘리먼트를 포토샵에서 편집하지않고 마음대로 바꿀수 있다는건 참 편리한 점이다.CSS3부터 적이 가능하다.3D도 있다. 여기선 2D를 둘러본다 IE는9부터 지원한다.
기본적으로 transform 을 사용하다.그 뒤의 값으로는 ratate,scale,skew,traslate,martix가 있다.
각 브라우저마다 앞쪽에 접두사를 붙여야된다(그림 참조).

이 그림처럼 여러변형이 가능하다

예제는 첫번째만 붙이고 나머지는 포스팅 편의상 간략히 transform 만 해줬다.
소스는 다음과 같다.matrix는 크기,이동,회전등 한번에 다 표현 할 수 있는것으로 조금 복잡하기만 할뿐 크게 어렵지 않다. 매트릭스를 테스트 해볼 툴도 있으니 가보자
http://sianasiatiger.cafe24.com/study/css3matrix2d/matrix2dExplorer.html

<div></div>
<div id="scale">75%로 축소</div>
<div id="skew">가로 30도 세로 20도</div>
<div id="translate">호버시 가로10px ,세로 20px이동</div>
<div id="rotate">20도 회전</div>
<div id="matrix">sclaeX,skewX,skewY,sclaY, X이동, Y이동</div>

div{ float:left; width:140px; height:140px; 
     background-color:#666; margin:10px;
	 }
#scale{ -webkit-transform: scale(.75);
	-moz-transform: scale(.75);
	-o-transform: scale(.75) ;
        -ms-transform: scale(.75) ;
	transform: scale(.75) ;
	/*값은 %*/
	}
#skew{ 
       transform: skew(30deg,20deg) ;
	/*x,y시계방향으로 돌릴각도*/
	}
#translate:hover{
        transform: translate(10px,20px) ;
	/*x,y,이동할거리*/
	 }
#rotate{
        transform: rotate(20deg);
	/*시계방향 회전각도*/
	}
#matrix{	
        transform:matrix(0.5,0.5,0,1,100,0);
        /*세로크기, skewX,skewY,세로크기, 가로이동, 세로이동*/
        } 

결과는 아래그림과 같다.

직접 확인 하려면 여기 http://sianasiatiger.cafe24.com/study/css3-transfom2d.html

한가지 깜박했는데 transform-origin로 회전,움직임등의 중심점을 정할수 있다.모퉁이가 아니라 중심점에서 x,y이동임을 주의할것. 소스는 아래와 같으니 참고

div{transform-origin: 0, 30%;}