We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

translate3d()

w

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

语法

`translate3d(tx, ty, tz)`

常量

tx

ty

tz

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. $\left(\begin{array}{ccc}10& 0& tx\\ 01& 0& ty\\ 0& 0& 1& tz\\ 0& 0& 0& 1\end{array}\right)$

示例

单轴变化示例

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