translate3d()

**translate3d()** CSS 函数 在 3D 空间中重新定位元素。其结果为 <transform-function> 数据类型。

试一试

此转换以三维向量 [tx, ty, tz] 为特征。其坐标定义元素在每个方向上移动的距离。

语法

css
translate3d(tx, ty, tz)

值

tx

是表示平移向量 [tx, ty, tz] 的横坐标（水平，x 分量）的 <length> 或 <percentage>。

ty

是表示平移向量 [tx, ty, tz] 的纵坐标（垂直，y 分量）的 <length> 或 <percentage>。

tz

是表示平移向量的 z 分量的 <length>。它不能是 <percentage> 值；在这种情况下，包含 transform 属性的属性被认为无效 [tx, ty, tz]。

笛卡尔坐标 在 ℝ^2 齐次坐标 在 ℝℙ^2 笛卡尔坐标在 ℝ^3 齐次坐标在 ℝℙ^3

此转换应用于 3D 空间，无法在平面上表示。

 平移不是 ℝ^3 中的线性变换，无法使用笛卡尔坐标矩阵表示。 ( 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 ) \left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{array} \right)

示例

使用单轴平移

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

结果

组合 z 轴和平移 x 轴

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

结果

规范

规范
CSS 变换模块级别 2
# funcdef-translate3d

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅