当前位置：文江博客知识库简体中文文档 Web CSS transform-function translate3d

translate3d() - CSS（层叠样式表）编辑

translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

语法

translate3d(tx, ty, tz)

常量
tx: 是一个 <length> 代表移动向量的横坐标。
ty: 是一个<length> 代表移动向量的纵坐标。
tz: 是一个 <length> 代表移动向量的z坐标。它不能是<percentage> 值；那样的移动是没有意义的。

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
此变换适用于3D空间，并不适用于这两种情况。		平移不是ℝ³中的线性变换，不能使用笛卡尔坐标矩阵表示。	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{matrix})$

示例

单轴变化示例

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