web-dev-qa-db-ja.com

JavaScriptを使用してスタイル-webkit-transformを動的に設定する方法は？

JavaScriptを使用して-webkit-transform: rotate()プロパティを動的に変更したいのですが、よく使用されるsetAttributeが機能しません。

img.setAttribute('-webkit-transform', 'rotate(60deg)');

.styleも機能していません...

これをJavaScriptで動的に設定するにはどうすればよいですか？

javascriptwebkit
103
rymn

JavaScriptスタイル名はWebkitTransformOriginおよび WebkitTransform です

element.style.webkitTransform = "rotate(-2deg)";

WebKit here のDOM拡張機能リファレンスを確認してください。

190
Ólafur Waage

最も一般的なベンダーのJavaScript表記は次のとおりです。

webkitProperty
MozProperty
msProperty
OProperty
property

次のようなインライン変換スタイルをリセットします。

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

そして、jQueryを使用してこのように：

$(element).css({
    "webkitTransform":"",
    "MozTransform":"",
    "msTransform":"",
    "OTransform":"",
    "transform":""
});

ブログ投稿JavaScriptによるベンダープレフィックスのコーディング（2012-03-21）を参照してください。

86
Armel Larcier

使用してみてください

img.style.webkitTransform = "rotate(60deg)"
11
Andrei Serdeliuc ॐ

setAttributeを介してそれを行いたい場合は、style属性を次のように変更します。

element.setAttribute('style','transform:rotate(90deg); -webkit-transform: rotate(90deg)') //etc

これは、他のすべてのインラインスタイルをリセットし、必要なスタイルプロパティの値のみを再設定する場合に役立ちますが、ほとんどの場合、それは望ましくありません。だから誰もがこれを使うことを勧めた。

element.style.transform = 'rotate(90deg)';
element.style.webkitTransform = 'rotate(90deg)';

上記は次と同等です

element.style['transform'] = 'rotate(90deg)';
element.style['-webkit-transform'] = 'rotate(90deg)';
4
thednp

Dオブジェクトをアニメーション化するには、コードを使用します

<script>

$(document).ready(function(){

    var x = 100;
    var y = 0;
setInterval(function(){
    x += 1;
    y += 1;
    var element = document.getElementById('cube');
    element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome
    element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
},50);
//for other browsers use:   "msTransform",    "OTransform",    "transform"

});

</script>
2
Dhruv Dholakia