translate3d()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
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中的线性变换，不能使用笛卡尔坐标矩阵表示。 |
||
示例
单轴变化示例
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 |
浏览器兼容性
Loading…