translate()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
translate() CSS 함수 는 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경합니다.
실행 결과로 <transform-function> 데이터 유형을 반환합니다.
시도해 보기
transform: translate(0);
transform: translate(42px, 18px);
transform: translate(-2.1rem, -2ex);
transform: translate(3ch, 3mm);
<section id="default-example">
<img
class="transition-all"
id="static-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
#static-element {
opacity: 0.4;
position: absolute;
}
#example-element {
position: absolute;
}
이 변환은 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속성에 의해 정의된 참조 상자의 너비를 나타냅니다.
- 이 값은 변환하는 벡터의 가로축(수평, x축)을 나타내는
- 이중
<length-percentage>값- 이 값은 변환하는 벡터의 가로축(수평, x축)과 세로축(수직, y축)을 모두 나타내는 두 개의
<length>또는<percentage>를 설명합니다. 백분율 값의 첫 번째는transform-box속성에 의해 정의된 참조 상자의 너비를 나타내며, 두 번째는 높이를 나타냅니다.
- 이 값은 변환하는 벡터의 가로축(수평, x축)과 세로축(수직, y축)을 모두 나타내는 두 개의
| ℝ^2의 데카르트 좌표(Cartesian coordinates) | ℝℙ^2의 동차좌표(Homogeneous coordinates) | ℝ^3의 데카르트 좌표(Cartesian coordinates) | ℝℙ^3의 동차좌표(Homogeneous coordinates) |
|---|---|---|---|
|
변환은 ℝ^2의 선형 변환이 아니며, 데카르트 좌표 행렬을 사용해 나타낼 수 없습니다. |
|||
[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 |
브라우저 호환성
Loading…