如何使用JavaScript动态设置style-webkit转换？

我想使用JavaScript动态更改

-webkit transform:rotate（）

属性，但常用的

setAttribute

不起作用：

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

.style

也不起作用

如何在JavaScript中动态设置此选项？

尝试使用

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

---

JavaScript样式名称为

WebkitTransformOrigin

和

---

检查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":""
});

---

请参阅博文（2012-03-21）。

如果您想通过

setAttribute

执行此操作，您可以更改

样式

属性，如下所示：

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)';

---

要设置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>

$（文档）.ready（函数（）{
var x=100；
var y=0；
setInterval（函数（）{
x+=1；
y+=1；
var元素=document.getElementById（'cube'）；
element.style.webkitttransform=“translateZ（-100px）rotateY（+x+”deg）rotateX（+y+”deg）”；//用于safari和chrome
element.style.MozTransform=“translateZ（-100px）rotateY（+x+”deg）rotateX（+y+”deg）”；//用于firefox
},50);
//对于其他浏览器，请使用：“msTransform”、“OTransform”、“transform”
});

如果需要多个，请用空格分隔，例如：

element.style.webkitttransform=“rotate（-2deg）translateX（100px）”

这在Safari和Chrome上运行良好，但在Firefox上不起作用。Firefox的等效方法是什么？MozTransform应该是您的朋友。@Olafur Apple链接已失效。因此，只有使用字符串才能做到这一点。如果它是递归的，它看起来会很慢。你会设置style属性而不仅仅是这个吗jQuery会自动选择正确的前缀，只需编写

transform

@Blaise这是新的。从哪个版本开始？从jQuery 1.8.0开始

win.style.transform=“translate（-50%）”

不工作

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