[ CSS ] transform과 좌표계

뷰포트와 좌표계

  모든 뷰표트는 좌표계라 할 수 있으며 좌측 상단을 원점으로 합니다. 아래의 그림은 좌표계를 시각화해서 나타낸 것인데 약간의 실수가 있으니 각 축이 가지는 이동 및 회전의 방향만 확인하시기 바랍니다.

 

 

transform 적용에 따른 좌표계 이동

  css를 사용해 각 요소에 transform을 적용한다면 각 요소는 로컬 좌표계를 생성하고 원점을 각 요소의 50%, 50% 지점으로 정의합니다. 이러한 로컬 좌표계의 원점은 transform-origin 속성을 통해 조작가능합니다. css에서의 변형은 기본적으로 transform matrix와의 연산을 통해 이루어집니다. matrix의 연산에서 교환법칙은 성립되지 않으므로 각 transform의 적용 순서에 주의해야합니다. 아래 그림에서와 같이 rotation 후 translation을 적용한 (a)와 translation 후 rotation을 적용한 (b) 의 결과는 다릅니다.(html문서가 계층적 구조를 가지듯이 각 로컬 좌표계 도한 상위 로컬 좌표계에 속해있다고 생각한다면 이해하기가 쉬울 것입니다.)