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 | Status | Comment |
---|---|---|
CSS Transforms Level 2 translate3d() |
Editor's Draft | Initial definition |
浏览器兼容性
有关兼容性信息,请参阅<transform-function>的兼容性信息。