translate3d()

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 에서 선형 변환이 아니며, 직교 좌표계 안에 행렬을 사용하여 표현 할 수  없습니다. 100tx010ty001tz0001

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;
}

Result

관련 주제