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

【问题标题】：How to set the style -webkit-transform dynamically using JavaScript?如何使用 JavaScript 动态设置样式 -webkit-transform？
【发布时间】：2010-10-17 01:42:52
【问题描述】：

我想用JavaScript动态改变-webkit-transform: rotate()属性，但是常用的setAttribute不起作用：

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

.style 也不起作用...

如何在 JavaScript 中动态设置？

【问题讨论】：

你不会设置样式属性而不仅仅是这个

标签： javascript webkit

【解决方案1】：

JavaScript 样式名称为 WebkitTransformOrigin 和 WebkitTransform

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

检查 WebKit here 的 DOM 扩展参考。

【讨论】：

如果要多于一个，用空格隔开例如：element.style.webkitTransform = "rotate(-2deg) translateX(100px)";
这适用于 Safari 和 Chrome，但不适用于 Firefox。对 Firefox 执行此操作的等效方法是什么？
MozTransform 应该是你的朋友。
@Olafur Apple 链接已失效。
因此，这是使用字符串执行此操作的唯一方法。如果它是递归的，似乎会很慢。

【解决方案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)。

【讨论】：

jQuery 自动选择正确的前缀，只需要写transform。
@Blaise 那是新的。从哪个版本开始？
它从 jQuery 1.8.0 开始。 Commit on Github
win.style.transform ="translate(-50%)" 不工作

【解决方案3】：

尝试使用

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

【讨论】：

【解决方案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)';

【讨论】：

【解决方案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>

【讨论】：