How to add webkit style dynamically in Javascript.

Sometimes the property names for dynamically changing an element’s style is not as obvious as it seems. So how can you add WebKit style dynamically in JavaScript?

This is made relatively simple as these are the names for the WebKit related properties:

• WebkitTransformOrigin
• WebkitTransform

element.style.webkitTransform = "rotate(50deg) translateX(100px)";

element.style["transform"] = "rotate(50deg)";
element.style["-webkit-transform"] = "rotate(50deg)";

This can also be achieved using setAttribute:

element.setAttribute(
  "style",
  "transform:rotate(50deg); -webkit-transform: rotate(90deg)"
);