CSS tranform:translateY from JavaScript

You can pass any transform property as a string.

HOW?

It can be done like this;

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

I find out that if I write

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

It only affects x axes.

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

did not work out.

Or you can use rotate property;

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

Try it!

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

In addition to the accepted answer, it is also possible to target the each axis separately - such as in the following example:

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

Again, the value in the parentheses can be anything that would otherwise work when specified directly in CSS.

Related