translate3d()
Baseline 2022
Newly available
Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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 |
浏览器兼容性
BCD tables only load in the browser