[CSS] 변형 스타일 (transform)

요소 이동

선택자 { transform : translate(x축이동거리, [y축이동거리]) ; }
선택자 { transform : translate3d(x축이동거리, y축이동거리, z축이동거리) ; }

선택자 { transform : translateX(x축이동거리) ; }
선택자 { transform : translateY(y축이동거리) ; }
선택자 { transform : translateZ(z축이동거리) ; }

 

  - y값이 추어지지 않으면 x값과 같다고 간주함

 

요소 확대 및 축소

선택자 { transform : scale(x축배수, [y축배수]) ; }
선택자 { transform : scale3d(x축배수, y축배수, z축배수) ; }

선택자 { transform : scaleX(x축배수) ; }
선택자 { transform : scaleY(y축배수) ; }
선택자 { transform : scaleZ(z축배수) ; }

 

요소 회전

선택자 { transform : rotate(각도deg) ; }

 

  - 시계 방향(양수) or 반시계 방향(음수)로 회전

 

요소를 비틀어서 왜곡

선택자 { transform : skew(x축당기는정도, y축당기는정도) ; }

선택자 { transform : skewX(x축당기는정도) ; }
선택자 { transform : skewY(y축당기는정도) ; }

 

  - y값이 주어지지 않으면 0이라고 간주함

 

변형 기준점 설정

선택자 { transform-origin : x축좌표 y축좌표 [z축좌표] ; }

 

  - 속성 값 : px | 백분율 | left | center | right

 

원근감 부여

선택자 { perspective : 크기px | none ; }

/* 입체적으로 표현할 요소의 bottom 위치 지정 */
선택자 { perspective-origin : x축좌표 | y축좌표 ; }

 

  - 속성 값이 클수록 사용자로부터 멀어짐

  - 속성값은 0보다 커야 함

 

하위 요소에도 3D 변형 적용

선택자 { transform-style : flat | preserve-3d ; }

 

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

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

 

요소의 뒷면(반대쪽 면)의 표시 여부

선택자 { backface-visibility : visible | hidden ; }

 

  - visible (기본값) : 뒷면을 표시함

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

 

변형 관련 속성 한 번에 표기

선택자 { transform : 확대축소배율 회전각도 [원근감여부] ; }