javascript - 具有多个属性的 css 转换适用于 firefox 但不适用于 chrome

Question

我正在尝试为一组图像添加样式变换、旋转和缩放。我用过

img.style = "transform: rotate(" + object[k].angle + "deg) scale(0.2);";

使用此转换属性旋转和样式在 firefox 中工作正常，但在 chrome 上运行时它不起作用。所以我尝试使用

img.style.webkitTransform = "rotate(" + object[k].angle + "deg) scale(0.2);";

在 firefox 和 chrome 中使用它时，只有缩放有效。由于我对来自 json 的不同图像使用不同的旋转 Angular ，我发现很难将它们调用到 style sheet.css 中作为替代方案

Answer 1

这是因为字符串中的分号。 Chrome 将其视为您正在设置的样式的一部分并忽略它，因为它认为它是无效的。删除它在 Chrome 中工作正常。变化:

img.style.webkitTransform = "rotate(" + object[k].angle + "deg) scale(0.2);";
                                                                          ^

收件人:

img.style.webkitTransform = "rotate(" + object[k].angle + "deg) scale(0.2)";