(CSS) 변형-2D Transform, CSS 좌표 체계

CSS3에서는 transform 속성을 사용하여 HTML 요소를 변형(transform)시킬 수 있다.

transform에서 x, y, z 좌표를 사용한다. 좌표는 아래 그림과 같다.

CSS 좌표체계에서 기준점은 브라우저의 왼쪽 상단이다.

이 기준점 각 축의 화살표 방향이 양의 방향이고, 반대는 음의 방향이다.

Z축은 모니터에 있는 사용자의 방향을 가리킨다.

 

transform의 메소드 translateY로 예를 들어보자.

translateY(y)는 요소를 Y축을 기준으로 y만큼 이동시킨다는 의미다.

y의 값이 양수일 경우 요소는 아래와 그림의 빨간선만큼 이동한다.