Menu
How would I access and change transform: translateY(0px); using the style object from JavaScript, in a similar matter to div.style.background = 50px.
I'm trying to make it so a header on my webpage disappears as the user scrolls down but div.style.tranform or div.style.translate doesn't seem to work.
384
The CSS translateX() function is used to move elements in a two-dimensional space along the x -axis (horizontally). It moves the position of the element on the horizontal plane by the amount provided by t .
The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type.
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/
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
