这篇翻译不完整。请帮忙从英语翻译这篇文章。
w
translate3d() CSS 函数在3D空间内移动一个元素的位置. 这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。
Syntax
translate3d(tx, ty, tz)
Values
- tx
- 是一个
<length>代表移动向量的横坐标. - ty
- 是一个
<length>代表移动向量的纵坐标. - tz
- 是一个
<length>代表移动向量的z坐标。它不能是<percentage>值; 那样的移动是没有意义的。
| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
|---|---|---|---|
|
This transform applies to the 3D space and cannot be represented on the plane. |
A translation is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. | ||
Examples
Using a single axis translation
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;
}
Result
Combining z-axis and x-axis translation
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;
}