translate3d()

这篇翻译不完整。请帮忙从英语翻译这篇文章

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. 100tx010ty001tz0001

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;
}

Result

文档标签和贡献者

 此页面的贡献者: zxk7516
 最后编辑者: zxk7516,