translateY()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
translateY() 在页面垂直移动元素，结果是 CSS 数据类型 <transform-function>。
尝试一下
transform: translateY(0); transform: translateY(42px); transform: translateY(-2.1rem); transform: translateY(3ch); <section id="default-example"> <img class="transition-all" id="static-element" src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> <img class="transition-all" id="example-element" src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </section> #static-element { opacity: 0.4; position: absolute; } #example-element { position: absolute; } 备注：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 上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵 | |||
[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 |