translateY()

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.

translateY() 在页面垂直移动元素,结果是 CSS 数据类型 <transform-function>

备注: translateY(ty) 对应 translate(0, ty)translate3d(0, ty, 0)

语法

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

<length><percentage>

表示变换向量的纵坐标。百分比指的是盒子高度,盒子由属性 transform-box 定义。

笛卡尔坐标 ℝ2

在ℝℙ2上的同类坐标

在ℝ3上的笛卡尔坐标

在ℝℙ3同类坐标

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

10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]

形式语法

translateY(<length-percentage>)

示例

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: translateY(10px);
  background-color: pink;
}

结果

规范

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

浏览器兼容性

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
translateY()

Legend

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

Full support
Full support

参见