在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type.

注意： translateX(tx) 相当于 translate (tx, 0) or translate3d (tx, 0, 0) .

句法

/* <length-percentage> values */
transform: translateX(200px);
transform: translateX(50%);
					

值

<length-percentage>

是 <length> or <percentage> representing the abscissa of the translating vector. A percentage value refers to the width of the reference box defined by the transform-box 特性。

Cartesian coordinates on ℝ 2	Homogeneous coordinates on ℝℙ 2	Cartesian coordinates on ℝ 3	Homogeneous coordinates on ℝℙ 3
A translation is not a linear transformation in ℝ 2 and can't be represented using a Cartesian-coordinate matrix.	$\left(\begin{array}{cc}10& t\\ 01& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{cc}10& t\\ 01& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}10& 0& t\\ 01& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$
	[1 0 0 1 t 0]

形式句法

translateX(<length-percentage>)
						

范例

HTML

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
						

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}
.moved {
  transform: translateX(10px); /* Equal to translate(10px) */
  background-color: pink;
}
						

结果

规范

规范	状态	注释
CSS Transforms Level 1 The definition of 'translateX()' in that specification.	工作草案	初始定义

浏览器兼容性

Please see the <transform-function> data type for compatibility info.

另请参阅

• transform
• <transform-function>

元数据

• 最后修改： 2020 年 11 月 3 日

相关话题

1. CSS
2. CSS 参考