CSS tranform:translateY from JavaScript

javascript css transform
Jim Jones picture Jim Jones · Dec 20, 2013 · Viewed 55.1k times · Source

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.

Answer

endertunc picture endertunc · Aug 13, 2015

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/

Related questions

How to get value of translateX and translateY?

I want to get translateY value from the in-line css with the JavaScript. Here is the in-line value: style ="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, -13361.5px) scale(1) translateZ(0px);" These code give to me the total …

Read More
How to get the MouseEvent coordinates for an element that has CSS3 Transform?

I want to detect where a MouseEvent has occurred, in coordinates relative to the clicked element. Why? Because I want to add an absolutely positioned child element at the clicked location. I know how to detect it when no CSS3 …

Read More
How to read/parse individual transform style values in JavaScript?

Webkit's blog post from last year on 3D transforms explains the various transform 'functions' that can be used in the -webkit-transform property. For example: #myDiv { -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px); } My question: how do you access individual values …

Read More