CSS 转换：从 JavaScript 翻译 Y

Question

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

我正在尝试使我的网页上的标题随着用户向下滚动而消失，但div.style.tranform或div.style.translate似乎不起作用。

Answer 1

您可以将任何转换属性作为字符串传递。

怎么样？

可以这样做;

div.style.transform = "translate(x,y)"

我发现如果我写

div.style.transform = "translate(someValue)"

它只影响 x 轴。

"translate-y(someValue)" or "translate-x(someValue)"

没有解决。

或者您可以使用旋转属性；

div.style.transform = "rotate(50px)".

试试吧！

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

Answer 2

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

div.style.transform = "translateY(10px)";

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

Answer 3

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

我正在尝试制作它，以便当用户向下滚动时网页上的标头消失，但div.style.tranform或div.style.translate似乎不起作用。