translate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

translate() CSS 함수 는 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경합니다. 실행 결과로 <transform-function> 데이터 유형을 반환합니다.

시도해보기

이 변환은 2차원 벡터의 특징을 가집니다. 벡터의 좌표들은 요소가 각 방향으로 얼마나 이동하는지를 정의합니다.

구문

css
/* 단일 <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%);

값

  • 단일 <length-percentage> 값
    • 이 값은 변환하는 벡터의 가로축(수평, x축)을 나타내는 <length> 또는 <percentage> 입니다. 변환하는 벡터의 세로축(수직, y축)은 0으로 설정됩니다. 예를 들어, translate(2px)은 translate(2px, 0)과 동일합니다. 백분율 값은 transform-box 속성에 의해 정의된 참조 상자의 너비를 나타냅니다.
  • 이중 <length-percentage> 값
    • 이 값은 변환하는 벡터의 가로축(수평, x축)과 세로축(수직, y축)을 모두 나타내는 두 개의 <length> 또는 <percentage> 를 설명합니다. 백분율 값의 첫 번째는 transform-box 속성에 의해 정의된 참조 상자의 너비를 나타내며, 두 번째는 높이를 나타냅니다.
ℝ^2의 데카르트 좌표(Cartesian coordinates) ℝℙ^2의 동차좌표(Homogeneous coordinates) ℝ^3의 데카르트 좌표(Cartesian coordinates) ℝℙ^3의 동차좌표(Homogeneous coordinates)

변환은 ℝ^2의 선형 변환이 아니며, 데카르트 좌표 행렬을 사용해 나타낼 수 없습니다.

(1 0 tx 0 1 ty 0 0 1) (1 0 tx 0 1 ty 0 0 1) (1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1)
[1 0 0 1 tx ty]

형식 구문

css
translate(<length-percentage>, <length-percentage>?)

예제

단일 축 변환

HTML

html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* translateX(10px) 또는 translate(10px, 0)과 동일 */
  transform: translate(10px);
  background-color: pink;
}

결과

x축과 y축 변환

HTML

html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}

결과

명세서

Specification
CSS Transforms Module Level 1
# funcdef-transform-translate

브라우저 호환성

BCD tables only load in the browser

같이 보기