CSS translate() 함수

정의와 사용법

CSS의 translate() 함수는 요소의 위치를 변경할 수 있습니다.

translate() 함수가 transform 속성에서 사용.

예제

요소의 위치를 변경하십시오：

#myDiv1 {
  transform: translate(50px); /* 요소를 x축으로 50px 이동합니다. y축으로 0px 이동합니다 */
}
#myDiv2 {
  transform: translate(50px, 20px); /* 요소를 x축으로 50px, y축으로 20px 이동합니다 */
}
#myDiv3 {
  transform: translate(100px, 30px); /* 요소를 x축으로 100px, y축으로 30px 이동합니다 */
}

직접 시험해 보세요

CSS 문법

translate(x, y)
값 설명
x 必需. 요소가 x축으로 이동할 거리를 정의합니다. 수치나 퍼센트일 수 있습니다。
y

선택 사항. 요소가 y축으로 이동할 거리를 정의합니다. 수치나 퍼센트일 수 있습니다。

省略된 경우, 값이 0으로 설정됩니다。

기술 세부 사항

버전： CSS Transforms Module Level 1

浏览器支持

표中的数字表示首个完全支持该函数的浏览器版本。

크롬 에지 파이어폭스 사파리 오페라
1 12 3.5 3.1 10.5

관련 페이지

教程：CSS 2D 변환

참조:CSS 트랜스폼 속성

참조:CSS translateX() 함수

참조:CSS translateY() 함수

참조:HTML DOM 트랜스폼 속성