translate3d()

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

translate3d() CSS 函式以 3D 場境的方式定位元素。其結果為 <transform-function> (en-US) 資料型別。

嘗試一下

這個轉場的特徵是三維向量，其坐標則定義元素的方向該如何移動。

語法

translate3d(tx, ty, tz)

數值

tx

其 <length> (en-US) 代表平移向量的橫坐標。

ty

其 <length> (en-US) 代表平移向量的縱坐標。

tz

其 <length> (en-US) 代表平移向量的 z 分量。數值不能是 <percentage> (en-US)：否則，此轉場的屬性無效。

ℝ2 上的笛卡兒座標（Cartesian coordinate） ℝℙ2 上的齊次坐標（homogeneous coordinates） ℝ3 上的笛卡兒座標 ℝℙ3 上的齊次坐標

This transformation applies to the 3D space and can't be represented on the plane.

A translation is not a linear transformation in ℝ3 and can't be represented using a Cartesian-coordinate matrix. 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1

示例

使用單軸平移

HTML

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

CSS

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

.moved {
  /* Equivalent to perspective(500px) translateX(10px) */
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}

結果

Combining z-axis and x-axis translation

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: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}

結果

規範

Specification
CSS Transforms Module Level 2
# funcdef-translate3d

瀏覽器相容性

請參見 <transform-function> (en-US)。

參見