translateY()
**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>
-
该值为
<length>
或<percentage>
,表示平移向量 [0, ty] 的纵坐标(垂直,y 坐标)。在 笛卡尔坐标系 中,它表示沿 y 轴的位移。百分比值指的是由transform-box
属性定义的参考框的高度。
正式语法
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;
}
结果
规范
规范 |
---|
CSS 变换模块级别 1 # funcdef-transform-translatey |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。