web-dev-qa-db-ja.com

CSS変換：JavaScriptからのtranslateX

JavaScriptからスタイルオブジェクトを使用してtransform: translateY(0px);にアクセスして変更するには、div.style.background = 50pxと同様の方法でどうすればよいですか。

ユーザーが下にスクロールするとWebページのヘッダーが消えるようにしようとしていますが、div.style.tranformまたはdiv.style.translateが機能していないようです。

javascriptcsstransform
12
Jim Jones

任意の変換プロパティを文字列として渡すことができます。

どうやって？

それはこのように行うことができます。

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/

25
endertunc

受け入れられた回答に加えて、次の例のように、各軸を個別にターゲットにすることもできます。

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

かっこ内の値は、CSSで直接指定した場合に機能するものであれば何でもかまいません。

4
ne1410s

代替ソリューション：

div.setAttribute('transform','translateY(10px)');
0
mbunch