translateX()

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

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

语法

translateX(t)

笛卡尔坐标 ℝ² 在ℝℙ²上的同类坐标在ℝ³上的笛卡尔坐标在ℝℙ³同类坐标

笛卡尔坐标 ℝ²	在ℝℙ²上的同类坐标	在ℝ³上的笛卡尔坐标	在ℝℙ³同类坐标
在ℝ²上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵	$(\begin{matrix} 1 & 0 & t \end{matrix})$ $(\begin{matrix} 0 & 1 & 0 \end{matrix})$ $(\begin{matrix} 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & t \end{matrix})$ $(\begin{matrix} 0 & 1 & 0 \end{matrix})$ $(\begin{matrix} 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & t \end{matrix})$ $(\begin{matrix} 0 & 1 & 0 & 0 \end{matrix})$ $(\begin{matrix} 0 & 0 & 1 & 0 \end{matrix})$ $(\begin{matrix} 0 & 0 & 0 & 1 \end{matrix})$
`[1 0 0 1 t 0]`

在ℝ²上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵

$(\begin{matrix} 1 & 0 & t \end{matrix})$

$(\begin{matrix} 0 & 1 & 0 \end{matrix})$

$(\begin{matrix} 0 & 0 & 1 \end{matrix})$

$(\begin{matrix} 1 & 0 & t \end{matrix})$

$(\begin{matrix} 0 & 1 & 0 \end{matrix})$

$(\begin{matrix} 0 & 0 & 1 \end{matrix})$

$(\begin{matrix} 1 & 0 & 0 & t \end{matrix})$

$(\begin{matrix} 0 & 1 & 0 & 0 \end{matrix})$

$(\begin{matrix} 0 & 0 & 1 & 0 \end{matrix})$

$(\begin{matrix} 0 & 0 & 0 & 1 \end{matrix})$

[1 0 0 1 t 0]

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

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

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