CSS3 트랜스폼(transform)

CSS3 트랜스폼(transform)

 

트랜스폼은 여러 요소를 회전시키거나 기울이는 등의 변형 작업을 의미합니다.

 

트랜스폼 관련 속성

속성	설명
transform	요소의 모양을 변경함
transform-origin	기준점을 설정함

 

트랜스폼(transform) 속성

트랜스폼(transform)은 요소를 변형시키기 위해서 추가된 속성을 의미합니다.

세부 기능 속성을 부여함으로써 요소를 특정 위치로 이동시키거나, 회전, 또는 기울임의 변형을 줄 수 있습니다.

형식

transform: 세부 속성 (세부 속성의 값)

 

transform 속성의 세부 속성

세부 속성	설명
matrix (값, 값, 값, 값, 값, 값)	여러 값의 행렬을 의미함
translate (X값, Y값)	요소를 가로와 세로로 이동함
translateX (값)	요소를 가로로 이동함
translateY (값)	요소를 세로로 이동함
scale (X값, Y값)	요소의 너비와 높이를 변형함
scaleX (값)	요소의 너비를 변형함
scaleY (값)	요소의 높이를 변형함
rotate (각도)	요소를 회전함
skew (X각도, Y각도)	요소를 가로와 세로로 기울임
skewX (각도)	요소를 가로로 기울임
skewY (각도)	요소를 세로로 기울임

 

translate 속성

translate 속성은 요소를 가로와 세로로 이동하는 역할을 하며 값으로는 이동 좌표인 x, y값을 픽셀로 나타냅니다.

 

scale 속성

scale 속성은 요소의 너비와 높이를 변형시키는 역할을 수행합니다.

 

rotate 속성

rotate 속성은 요소를 회전시키는 역할을 수행합니다.

rotate 속성의 값으로는 각도의 단위인 deg(degree)를 값으로 사용하고, 플러스 값은 시계 방향, 마이너스 값은 반시계 방향으로 회전함을 의미합니다.

 

skew 속성

skew 속성은 요소를 기울이는 역할을 수행합니다.
skew 속성의 값으로는 각도의 단위인 deg(degree)를 값으로 사용하고, 가로와 세로로 기울이는 값이 다를 수 있으므로 두 개의 값을 각각 지정해 줍니다.

 

matrix 속성

matrix 속성은 한번에 6개의 값을 지정하여 사용합니다.

matrix 속성의 기본 값은 (1, 0, 0, 1, 0, 0)이며,  matrix 속성을 사용하여 요소의 이동 및 크기 변형, 기울임 등을 한 번에 설정하는 것이 가능합니다.

형식

matrix (scaleX, skewX, skewY, scaleY, translateX, translateY)

 

transform-origin 속성

transform-origin 속성은 기준점 설정을 의미합니다.

X 좌표와 Y 좌표를 나타내는 두 개의 값을 가지며 기본 값은 50%  50% 입니다.

 

transform-origin 속성의 매크로 값

값	설명
left	0   50% 와 같음
right	100%   50% 와 같음
top	50%   0 과 같음
bottom	50%   100% 와 같음
center	50%   50% 와 같음

 

트랜스폼(transform) 실습 프로그램