在此页

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

translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.

This transformation is characterized by a two-dimensional vector. Its coordinates define how much the element moves in each direction.

句法

/* Single <length-percentage> values */
transform: translate(200px);
transform: translate(50%);
/* Double <length-percentage> values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
					

值

Single <length-percentage> 值

This value is a <length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector. The ordinate (vertical, y-coordinate) of the translating vector will be set to 0 。例如， translate(2) 相当于 translate(2, 0) . A percentage value refers to the width of the reference box defined by the transform-box 特性。

Double <length-percentage> 值

This value describes two <length> or <percentage> values representing both the abscissa (x-coordinate) and the ordinate (y-coordinate) of the translating vector. A percentage as first value refers to the width, as second part to the height 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& tx\\ 01& ty\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{cc}10& tx\\ 01& ty\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}10& 0& tx\\ 01& 0& ty\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$
	[1 0 0 1 tx ty]

形式句法

translate(<length-percentage> , <length-percentage>?)
						

范例

Using a single-axis translation

HTML

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

CSS

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

结果

Combining y-axis and x-axis translation

HTML

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

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}
.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
						

结果

规范

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

浏览器兼容性

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

另请参阅

• transform
• <transform-function>

元数据

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

相关话题

1. CSS
2. CSS 参考