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)
常量
示例
单轴变化示例
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
translate3d() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.