06.29(transform)

transform

요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있음

 

- 해당 요소를 움직임

- 해당 요소를 회전시킴

- 해당 요소의 크기를 변경함

- 해당 요소를 기울임

- 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킴

 

CSS3에서는 transform 속성을 사용하여 2D 변형(transform)과 3D 변형(transform)을 모두 제공함

---

2D transform 속성

속성	설명
transform	요소에 2D 또는 3D 변형(transform)을 적용
transform-origin	요소에 변형(transform)을 적용하는 변환 중심을 설정

 

2D transform 메소드

메소드	설명
matrix(n,n,n,n,n,n)	6개의 매개변수로 모든 2D 변형 메소드를 한 번에 설정
translate(x,y)	현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동
translateX(n)	현재 위치에서 해당 요소를 주어진 x축의 거리만큼 이동
translateY(n)	현재 위치에서 해당 요소를 주어진 y축의 거리만큼 이동
rotate(각도)	해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전
scale(x,y)	해당 요소의 크기를 주어진 배율만큼 늘리거나 줄임
scaleX(n)	해당 요소의 x축 크기를 주어진 배율만큼 늘리거나 줄임
scaleY(n)	해당 요소의 y축 크기를 주어진 배율만큼 늘리거나 줄임
skew(x축각도,y축각도)	해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울임
skewX(각도)	해당 요소를 주어진 각도만큼 x축 방향으로 기울임
skewY(각도)	해당 요소를 주어진 각도만큼 y축 방향으로 기울임