CSS translateY() 함수

정의와 사용법

CSS의 translateY() 함수는 요소를 y축(수직 방향)으로 다시定位할 수 있도록 합니다.

translateY() 함수는 transform 속성에서 사용됩니다.

예제

다른 <div> 요소를 수직 방향으로 다시定位합니다：

#myDiv1 {
  transform: translateY(30px); /* 요소를 y축으로 30px 이동합니다 */
}
#myDiv2 {
  transform: translateY(50px); /* 요소를 y축으로 50px 이동합니다 */
}
#myDiv3 {
  transform: translateY(-10px); /* 요소를 y축으로 -10px 이동합니다 */
}

직접 시험해 보세요

CSS 문법

translateY(y)
값 설명
y 필수. 요소가 y축으로 이동할 거리를 정의합니다. 숫자나 퍼센트일 수 있습니다.

기술 세부 사항

버전： CSS Transforms Module Level 1

브라우저 지원

표中之수는 이 함수를 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

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

관련 페이지

教程：CSS 2D 변환

참조:CSS 트랜스폼 속성

참조:CSS 트랜스라이드() 함수

참조:CSS 트랜스라이드X() 함수

참조:HTML DOM 트랜스폼 속성