Question

我想动态地使用JavaScript更改-webkit-transform: rotate()属性，但常用的setAttribute无效：

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

.style无效...

如何在JavaScript中动态设置？

Answer 1

JavaScript样式名称为WebkitTransformOrigin和WebkitTransform

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

检查WebKit here的DOM扩展引用。

Answer 2

以下是大多数常见供应商的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":""
});

请参阅博客文章 Coding Vendor Prefixes with JavaScript （2012-03-21）。

Answer 3

尝试使用

img.style.webkitTransform = "rotate(60deg)"

Answer 4

如果您想通过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)';

Answer 5

要为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>

如何使用JavaScript动态设置样式-webkit-transform？

5 个答案: