CSS转换:来自Javascript的translateY

Jim*_*nes 9 javascript css3

我将如何transform:translateY(0px);使用javascript中的样式对象访问和更改,类似于div.style.background=50px

我试图这样做,所以我的网页上的标题会随着用户向下滚动而消失 div.style.tranform或者div.style.translate看不到工作

end*_*unc 25

您可以将任何transform属性作为字符串传递.

怎么样?

它可以这样做;

div.style.transform = "translate(x,y)"
Run Code Online (Sandbox Code Playgroud)

我发现如果我写

div.style.transform = "translate(someValue)"
Run Code Online (Sandbox Code Playgroud)

它只影响x轴.

"translate-y(someValue)" or "translate-x(someValue)"
Run Code Online (Sandbox Code Playgroud)

没有成功.

或者你可以使用rotate属性;

div.style.transform = "rotate(50px)".
Run Code Online (Sandbox Code Playgroud)

试试吧!

https://jsfiddle.net/araknafobia/4wtxu0dr/1/

  • div.style.transform ="translateY(someValue)" (3认同)
  • 就我而言,我的错误是忘记了“someValue”的单位。例如,不要写“translate(10)”,而是写“translate(10px)”。 (2认同)

ne1*_*10s 13

除了接受的答案之外,还可以分别针对每个轴 - 例如在以下示例中:

div.style.transform = "translateY(10px)";
Run Code Online (Sandbox Code Playgroud)

同样,括号中的值可以是直接在 CSS 中指定时可以正常工作的任何值。