[CSS] transform의 translate 속성들

속성	공간	설명
translateX(x)	2차원(평면)	가로 좌표의 위치를 변경한다.
translateY(y)	2차원(평면)	세로 좌표의 위치를 변경한다.
translate(x) translate(x, y)	2차원(평면)	[값이 단일인 경우] 가로 좌표의 위치를 변경한다. [값이 이중일 경우] 가로, 세로의 위치를 변경한다.
translateZ(tz)	3차원(입체) *3D속성 필요	깊이의 좌표의 위치를 변경한다. 양수 값은 요소를 뷰어쪽으로 가깝게 이동하고, 음수 값은 더 멀리 이동한다.
translate3d(tx, ty, tz)	3차원(입체) *3D속성 필요	가로, 세로, 깊이의 위치를 변경한다.

*3D속성이 붙은 애들은 하드웨어 가속이 보장이 된다. (포퍼먼스가 좋다)

*3D속성이란

transform-style: preserve-3d

transform: perspective()

perspective

---

[공부 좌표]

Translation (moving)