[CSS] TRANSFORM - 변형

 

변형 : 특정 요소의 크기나 형태가 변하는 것

- 2차원 변형 : 웹 요소를 변형시킬 때, 단순히 수평이나 수직으로 이동하고 회전

- 3차원 변형 : x축과 y축에 원근감을 주는 z축을 추기해 변형

 

transform

- 2차원 변형 함수

  -> -webkit- 와 -moz-, -ms-, -o- 등의 접두사를 붙여야 함

변형 함수	설명
translate(tx, ty)	지정한 크기 만큼 x축과 y축으로 이동
translateX(tx)	지정한 크기 만큼 x축으로 이동
translateY(ty)	지정한 크기 만큼 y축으로 이동
scale(sx, sy)	지정한 크기 만큼 x축과 y축으로 확대 / 축소
scaleX(sx)	지정한 크기 만큼 x축으로 확대 / 축소
scaleY(sy)	지정한 크기 만큼 y축으로 확대 / 축소
rotate(각도)	지정한 각도만큼 회전
skew(ax, ay)	지정한 각도만큼 x축과 y축으로 비틀어 왜곡
skewX(ax)	지정한 각도만큼 x축으로 비틀어 왜곡
skewY(ay)	지정한 각도만큼 y축으로 비틀어 왜곡

 

- 3차원 변형 함수

  -> -webkit- 와 -mox- 등의 접두사를 붙여야 하고, -ms-는 따로 사용하지 않음

변형 함수	설명
matrix3d(n [, n])	4*4 행렬을 이용해 이동과 확대 / 축소 / 회전 등의 변환을 지정
translate3d(tx, ty, tz)	지정한 크기 만큼 x축과 y축, z축으로 이동
translateZ(tz)	지정한 크기 만큼 z축으로 이동
scale3d(sx, sy, sz)	지정한 크기 만큼 x축과 y축, z축으로 확대 / 축소
scaleZ(sz)	지정한 크기 만큼 z축으로 확대 / 축소
rotate3d(rz, ry, rz, 각도)	지정한 각도만큼 회전
rotateX(각도)	지정한 각도만큼 x축으로 회전
rotateY(각도)	지정한 각도만큼 y축으로 회전
rotateZ(각도)	지정한 각도만큼 z축으로 회전
perspective(길이)	입체적으로 보일 수 있는 깊이 값을 지정

 

 

transform-origin : 변형 기준점 설정

transform-origin : <x축> <y축> <z축> | initial | inherit;

- <x축> : 원점 기준의 x 좌표값으로 길이 값이나 백분율, left, center, right 중에서 사용

- <y축> : 원점 기준의 y 좌표값으로 길이 값이나 백분율, top, center, bottom 중에서 사용

- <x축> : 원점 기준의 z 좌표값으로 길이 값만 사용

 

perspective / perspective-origin : 원근감 표현

perspective : <크기> | none;

- <크기> : 원래 위치에서 사용자가 있는 방향으로 얼마나 이동하는지를 픽셀 크기로 지정

- none 속성 : perspective를 지정하지 않음 (기본 값)

perspective-origin : <x축 값> | <y축 값>;

- <x축 값> : 웹 요소가 x축에서 어디에 위치하는지 지정 (기본 값은 50%)

                 사용할 수 있는 값은 길이 값이나 백분율, left, center, right 중에서 사용

- <y축 값> : 웹 요소가 y축에서 어디에 위치하는지 지정 (기본 값은 50%)

                 사용할 수 있는 값은 길이 값이나 백분율,  top, center, bottom 중에서 사용

 

transform-style : 3D 변형 적용

- flat 속성 : 하위 요소를 평면으로 처리

- preserve-3d : 하위 요소들에 3D 효과를 적용

 

backface-visibility : 요소의 뒷면 표시

- visible 속성 : 뒷면 표시 (기본 값)

- hidden 속성 : 뒷면을 표시하지 않음