translate3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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中的线性变换，不能使用笛卡尔坐标矩阵表示。

 100tx010ty001tz0001

示例

单轴变化示例

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

参见