You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
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; }