CSS3 (transform)

scale (크기)

transform: scale(.5); 
scale(.5): x축, y축 둘다 반으로 줄어듦
scale(.5,1): x축 반으로, y축 그대로
scaleX(2): x축 너비값 변경
scaleY(2): y축 세로값 변경

rotate (회전)

transform: rotate(45deg); 

translate (위치)

transform: translate(100px,50px);
transform: translate(가로방향x,세로방향y); 

위치, 회전, 크기

transform: translate(100px,0) rotate(45deg)  scale(.5); 
translate 먼저 이동 시켜야 원하는 곳으로 이동함

회전, 크기, 위치

transform: rotate(45deg) scale(.5) translate(100px,0); 
translate 뒤에 이동하면 결과가 달라짐 

skew (비틀기)

transform: skew(45deg); 

origin (기준)

특정 지점을 변형의 기준으로 설정

transform-origin: 0 100%;
left bottom 으로도 가능