[CSS3] 2차원 변환 함수 -transform-origin 속성-

전 시간에 transform 속성은 2차원 변환을 할 수 있게 해주는 속성이라고 설명드렸습니다.

이번에 알아볼 transform-origin 속성은 변환 중심을 설정하는 스타일 속성입니다.

※transform-origin 속성의 기본은 태그의 중심을 변환 중심으로 잡습니다.

그럼 실습으로 들어가도록 할게요

이 내용은 바로 이전 포스팅에서 했던 내용입니다.

여기서 transform-origin 속성을 이용하여 변환 중심을 한번 이동해 보도록 하겠습니다.

결과물이 이렇게 보여집니다.

transform-origin의 문법은

transform-origin:x축 y축 z축 입니다.

그러면 x축 y축 z축에는 어떠한 속성의 값들이 쓰여지는지 한번 알아보도록 할게요

속성 값	기준 위치 정의
x축	left center right length %
y축	top center bottom length %
z축	length

위의 실습에서는 %(퍼센트)키워드를 이용하여 알아보았습니다.

이번에는 다른 키워드를 이용해서 한번 해볼게요

이렇게 x축은 right y축은 bottom 키워드를 사용해도 위와 결과값이 같은걸 볼 수 있습니다.