Question

Ok, I understand JavaScript addRule with simple css rules:

firstRule.style.color = "red";

But how do I add for example this:

-webkit-transform:translateX(16em) perspective(600px) rotateY(10deg)";

Something like this?:

firstRule.style.-webkit-transform = "translateX(16em) perspective(600px) rotateY(10deg)";

Because it does not work. Any ideas?

Answer 1

camelize it (replace any dash with uppercase character that comes after the dash):

firstRule.style.WebkitTransform = "translateX(16em) perspective(600px) rotateY(10deg)";

You can also use .setProperty:

firstRule.style.setProperty( "-webkit-transform", "translateX(16em) perspective(600px) rotateY(10deg)" );