如何使用JavaScriptdynamic设置样式-webkit-transform?

我想dynamic地使用JavaScript来更改-webkit-transform: rotate()属性。 但是常用的setAttribute不起作用:

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

.style不起作用

我怎样才能在JavaScript中dynamic设置? 我知道你们之前有过处理这方面的经验。

JavaScript样式名称是WebkitTransformOriginWebkitTransform

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

在这里检查WebKit的DOM扩展参考。

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

尝试使用

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

如果你想通过setAttribute来做,你可以改变style属性,如下所示:

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

如果你想重置所有其他的内联样式,只需要重新设置你需要的样式属性的值,这将是有帮助的,但在大多数情况下你可能不需要这样做。 这就是为什么大家build议使用这个:

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

以上相当于

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

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