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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
translate3d()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见