具有多个属性的css转换适用于Firefox，但不适用于chrome

Question

I'm trying to add style transform rotate as well as scale to a set of images. I used

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

Using this the transform attribute rotate and style work fine in firefox, but when running on chrome it dooesnt work. So I tried using

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

While using this in firefox and chrome only the scaling works. Since I am using different rotation angles for different image from a json I'm finding it difficult to call them into style sheet.css as an alternative

Answer 1

It's because of the semicolon within the string. Chrome treats this as part of the style you're setting and ignores it as it believes it to be invalid. Removing it works fine in Chrome. Change:

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

To:

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