translate, scale, rotate

이제 CSS transform의 핵심 3종 세트를 봅니다. translate, scale, rotate.

이 셋을 “요소를 움직이고, 키우고, 돌리는 명령”이라고 생각해도 시작은 됩니다. 하지만 편집기를 만들려면 한 단계 더 들어가야 합니다.

transform은 요소를 직접 바꾸는 명령이라기보다 좌표계를 바꾸는 함수입니다. 이 관점으로 보면 nested transform, inverse hit test, selection overlay가 훨씬 덜 무서워집니다.

translate, scale, rotate는 요소를 고치는 명령처럼 보이지만, 실제로는 local 축과 원점이 screen 위에서 어디로 가는지 정하는 변환입니다.

translate는 원점을 옮긴다

translate(tx, ty)는 모든 점에 같은 이동량을 더합니다.

p' = p + t

CSS로는 이렇게 씁니다.

transform: translate(40px, 20px);

사각형이 움직인 것처럼 보이지만, 수학적으로는 그 사각형의 local 좌표계를 screen 쪽으로 옮긴 것입니다.

scale(2)는 크기를 두 배로 만듭니다. 좌표 관점에서는 x축과 y축의 단위 벡터가 길어진 것입니다.

scale(sx, sy): p' = (sx * x, sy * y)

scale(-1, 1)처럼 음수 scale을 쓰면 좌우가 뒤집힙니다. 편집기에서 flip 기능을 만들 때 바로 이 개념을 씁니다.

rotate(theta)는 점을 원점 기준으로 회전합니다.

rotate(theta): p' = R(theta) * p

여기서 중요한 건 기준점입니다. CSS의 transform-origin 기본값은 center입니다. 그런데 우리가 수학 공식에서 아무 말 없이 회전하면 보통 원점 기준입니다. 이 차이를 무시하면 계산과 화면이 어긋납니다.

CSS transform 목록은 최종적으로 하나의 matrix로 합성됩니다.

transform: translate(40px, 20px) rotate(15deg) scale(1.2);

브라우저는 이 목록을 계산해서 최종 좌표 변환으로 사용합니다. JavaScript에서는 DOMMatrix를 쓰면 CSS matrix 문자열과 계산을 연결할 수 있습니다.

편집기 내부에서는 사용자에게 x, y, rotation, scale로 보여주더라도, 좌표 변환 자체는 matrix로 다루면 일관성이 좋아집니다.

데모에서는 translate와 rotate의 순서를 바꾸며 같은 숫자가 다른 결과를 만드는 이유를 봅니다.

오늘의 핵심은 transform을 “모양 변경”이 아니라 “좌표 변환”으로 읽는 것입니다. 이 관점 하나가 뒤 강의에서 밥값을 아주 많이 합니다.