translate() CSS 함수는 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경한다.
실행 결과로 <transform-function> 데이터 유형을 반환한다. 즉, 반환값이 transform 속성에 사용할 수 있는 변환함수임을 의미하는 것이다.
/* 단일 <length-percentage> 값 */
transform: translate(200px);
transform: translate(50%);
/* 이중 <length-percentage> 값 */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
translate() = translate( <length-percentage> , <length-percentage>? )
specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.
translate() 함수는 2차원 공간에서 [tx, ty] 벡터에 의한 변환을 지정한다. 여기서 'tx'는 첫 번 째 변환 값(즉, X축 이동 값)이고, 'ty'는 선택적으로 제공되는 두 번째 변환 값(즉, Y축 이동값)이다. 만약 'ty'값이 제공되지 않으면 'ty'는 기본값 0이 된다.
여기서 기억할 점은 translate() 함수에서 사용하는 값은 상대값이라는 점이다!
뷰포트나 요소의 부모 요소에 대한 절대적인 위치를 설정하는 것이 아니라, 요소가 원래 위치해 있던 곳에서 얼마만큼 이동할지를 지정하는 것이기 때문에 상대적이라고 할 수 있다.
translate() - CSS: Cascading Style Sheets | MDN
translate() CSS 함수 는 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경합니다. 실행 결과로 <transform-function> 데이터 유형을 반환합니다.
developer.mozilla.org
https://drafts.csswg.org/css-transforms/#funcdef-transform-translate
CSS Transforms Module Level 1
Abstract CSS transforms allows elements styled with CSS to be transformed in two-dimensional space. This specification is the convergence of the CSS 2D Transforms and SVG transforms specifications. CSS is a language for describing the rendering of structur
drafts.csswg.org
'CSS' 카테고리의 다른 글
| [CSS] display 속성 (1) | 2024.07.23 |
|---|---|
| [CSS] position 5가지 속성 정리 (0) | 2024.07.18 |