translateX()

translateX()函数表示在页面水平方向移动元素. 这个transformation具有特征的就是通过 <length> 定义了元素水平移动了多少。

translateX(tx)是translate(0, tx)的一种简写方式。

语法

translateX(t)

值

 <length>是代表了横坐标的向量变换.

笛卡尔坐标 ℝ2	在ℝℙ2上的同类坐标	在ℝ3上的笛卡尔坐标	在ℝℙ3同类坐标
在ℝ2 上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵	$\left(\begin{array}{cc}1 0 & t\end{array}\right)$ $\left(\begin{array}{c}\\ 0 1 & 0\end{array}\right)$ $\left(\begin{array}{c}\\ 0 & 0 & 1\end{array}\right)$	$\left(\begin{array}{cc}1 0 & t\end{array}\right)$ $\left(\begin{array}{c}\\ 0 1 & 0\end{array}\right)$ $\left(\begin{array}{c}\\ 0 & 0 & 1\end{array}\right)$	$\left(\begin{array}{ccc}1 0 & 0 & t\end{array}\right)$ $\left(\begin{array}{c}\\ 0 1 & 0 & 0\end{array}\right)$ $\left(\begin{array}{c}\\ 0 & 0 & 1 & 0\end{array}\right)$ $\left(\begin{array}{c}\\ 0 & 0 & 0 & 1\end{array}\right)$
	[1 0 0 1 t 0]

示例

HTML

<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: translateX(10px);
  background-color: blue;
}

结果