translate3d()

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

参见