如何使用JavaScriptdynamic设置样式-webkit-transform？
我想dynamic地使用JavaScript来更改-webkit-transform: rotate()属性。 但是常用的setAttribute不起作用：
img.setAttribute('-webkit-transform', 'rotate(60deg)');
.style不起作用
我怎样才能在JavaScript中dynamic设置？ 我知道你们之前有过处理这方面的经验。
JavaScript样式名称是WebkitTransformOrigin和WebkitTransform
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>
