此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 R2 | Homogeneous coordinates on RP2 | Cartesian coordinates on R3 | Homogeneous coordinates on RP3 |
|---|---|---|---|
|
此变换适用于 3D 空间,并不适用于这两种情况。 |
平移不是R3中的线性变换,不能使用笛卡尔坐标矩阵表示。 |
||
示例
单轴变化示例
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...