119

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

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

也不起作用.style...

如何在 JavaScript 中动态设置它？

4

5 回答 5

210

JavaScript 样式名称是WebkitTransformOrigin和WebkitTransform

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

在此处查看 WebKit 的 DOM 扩展参考。

于 2009-04-02T09:08:26.170 回答
92

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

于 2013-01-29T15:00:57.607 回答
12

尝试使用

img.style.webkitTransform = "rotate(60deg)"
于 2009-04-02T09:07:26.857 回答
5

如果您想通过这样做，您可以像这样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)';
于 2015-04-27T01:10:19.263 回答
2

要为您的 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>
于 2016-02-16T11:55:29.033 回答