translate3d()

语法

translate3d(tx, ty, tz)

常量

tx

是一个 <length> 代表移动向量的横坐标。

ty

是一个<length> 代表移动向量的纵坐标。

tz

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

单轴变化示例

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