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 空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

语法

css
translate3d(tx, ty, tz)

常量

tx

是一个 <length> 代表移动向量的横坐标。

ty

是一个<length> 代表移动向量的纵坐标。

tz

是一个 <length> 代表移动向量的 z 坐标。它不能是<percentage> 值；那样的移动是没有意义的。

Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3

此变换适用于 3D 空间，并不适用于这两种情况。

平移不是ℝ3中的线性变换，不能使用笛卡尔坐标矩阵表示。

 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1

示例

单轴变化示例

HTML

html
<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

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

结果

z 轴与 x 轴变化

HTML

html
<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) translate3d(10px, 0px, 100px);
  background-color: blue;
}

结果

规范

Specification
CSS Transforms Module Level 2
# funcdef-translate3d

浏览器兼容性

BCD tables only load in the browser

参见