translateX()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

translateX() 函数表示在二维平面上水平方向移动元素。其结果的数据类型是<transform-function>

备注: translateX(tx)等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。

语法

css
translateX(t)

参数

t

代表了向量平移的横坐标长度<length>

2空间中的笛卡尔坐标 在ℝℙ2上的投影坐标 在ℝ3上的笛卡尔坐标 在ℝℙ3上的投影坐标

在ℝ2 空间中的平移并非线性变化,因此不能表示为笛卡尔坐标矩阵。

1 0 t

0 1 0

0 0 1

1 0 t

0 1 0

0 0 1

1 0 0 t

0 1 0 0

0 0 1 0

0 0 0 1

[1 0 0 1 t 0]

示例

HTML

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

CSS

css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateX(10px); /* 等同于 translate(10px) */
  background-color: pink;
}

结果

规范

Specification
CSS Transforms Module Level 1
# funcdef-transform-translatex

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
translateX()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见