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

112

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

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

在.style不工作要么...

如何在JavaScript中动态设置？

javascript webkit

— 黑麦
source

您是否会设置样式属性，而不仅仅是这个属性

— 穆罕默德·乌默尔

201

JavaScript样式名称为WebkitTransformOrigin和WebkitTransform

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

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

— ÓlafurWaage
source

9

如果要再多一个，请用空格隔开例如： element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— Marc 2012年

1

在Safari和Chrome上运行正常，但在Firefox上无法运行。在Firefox中执行此操作的等效方法是什么？

— 里卡多·桑切斯·塞兹

3

MozTransform应该是您的朋友。

— haagmm

@Olafur苹果链接已死。

— Carcigenicate's

因此，这是使用字符串执行此操作的唯一方法。如果它是递归的，似乎会很慢。

— BBaysinger

89

以下是最常见的供应商的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）。

— Armel Larcier
source

5

jQuery自动选择正确的前缀，只需编写即可transform。

— 布莱斯2015年

@Blaise这是新的。从什么版本开始？

— Armel Larcier 2015年

1

从jQuery 1.8.0起就可以使用。在Github上提交

— Blaise

1

win.style.transform ="translate(-50%)"不起作用

— Momin

11

尝试使用

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

— 安德烈·塞德里奥克ॐ
source

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

— dnp
source

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>

— 德鲁夫（Dhruv Dholakia）
source