translate3d()
translate3d()
CSS 函数在 3D 空间内移动一个元素的位置。这个移动由一个三维向量来表达,分别表示他在三个方向上移动的距离。
语法
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
<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>
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
<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>
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