119

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

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

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

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

4

5 に答える 5

210

JavaScript スタイル名はWebkitTransformOrigin、WebkitTransform

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

ここで、WebKit の DOM 拡張リファレンスを確認してください。

于 2009-04-02T09:08:26.170 に答える
92

最も一般的なベンダーの 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) を参照してください。

于 2013-01-29T15:00:57.607 に答える
12

使ってみて

img.style.webkitTransform = "rotate(60deg)"
于 2009-04-02T09:07:26.857 に答える
5

経由でやりたい場合は、属性を次のよう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)';
于 2015-04-27T01:10:19.263 に答える
2

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

<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>
于 2016-02-16T11:55:29.033 に答える