현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
translate3d() CSS 함수는 3D공간에 요소의 위치를 이동시킵니다. 이 변환은 3차원 벡터에 의해 특성 지어지고, 그 좌표는 각 방향으로 얼마나 움직이는지를 정의합니다.
Syntax
translate3d(tx, ty, tz)
Values
- tx
- 변환 벡터의 x(가로) 좌표를 나타내는
<길이>입니다. - ty
- 변환 벡터의 y(세로) 좌표를 나타내는
<길이>입니다. - tz
- 변환 벡터의 z 좌표를 나타내는
<길이>입니다.<퍼센트>값일 수는 없으며, 이런 경우 이 속성은 유효하지 않다고 간주 합니다.
| ℝ2 직교 좌표 | ℝℙ2 동질 좌표 | ℝ3 직교 좌표 | ℝℙ3 동질 좌표 |
|---|---|---|---|
|
이 변환은 3D 공간에 적용되며, 평면에 표시 할 수 없습니다. |
이 변환은 ℝ3 에서 선형 변환이 아니며, 직교 좌표계 안에 행렬을 사용하여 표현 할 수 없습니다. | ||
Examples
단일 축 변환 사용
HTML
<p>foo</p> <p class="transformed">bar</p> <p>foo</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
transform: perspective(500px) translate3d(10px,0px,0px);
/* equivalent to perspective(500px) translateX(10px)*/
background-color: blue;
}
Result
Combining z-axis and x-axis translation
HTML
<p>foo</p> <p class="transformed">bar</p> <p>foo</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
transform: perspective(500px) translate3d(10px,0px,100px);
background-color: blue;
}