이론/CSS
[CSS] transform의 translate 속성들
millfeel1298
2021. 2. 7. 19:25
| 속성 | 공간 | 설명 |
| translateX(x) | 2차원(평면) | 가로 좌표의 위치를 변경한다. |
| translateY(y) | 2차원(평면) | 세로 좌표의 위치를 변경한다. |
| translate(x) translate(x, y) |
2차원(평면) | [값이 단일인 경우] 가로 좌표의 위치를 변경한다. [값이 이중일 경우] 가로, 세로의 위치를 변경한다. |
| translateZ(tz) |
3차원(입체) *3D속성 필요 |
깊이의 좌표의 위치를 변경한다. 양수 값은 요소를 뷰어쪽으로 가깝게 이동하고, 음수 값은 더 멀리 이동한다. |
| translate3d(tx, ty, tz) |
3차원(입체) *3D속성 필요 |
가로, 세로, 깊이의 위치를 변경한다. |
*3D속성이 붙은 애들은 하드웨어 가속이 보장이 된다. (포퍼먼스가 좋다)
*3D속성이란
[공부 좌표]