How to set the style -webkit-transform dynamically using JavaScript?

How to set the style -webkit-transform dynamically using JavaScript?

I want to change the -webkit-transform: rotate() property using JavaScript dynamically, but the commonly used setAttribute is not working:
img.setAttribute(‘-webkit-transform’, ‘rotate(60deg)’);

The .style is not working either…
How can I set this dynamically in JavaScript?


Solution 1:

The JavaScript style names are WebkitTransformOrigin and WebkitTransform = "rotate(-2deg)";

Check the DOM extension reference for WebKit here.

Solution 2:

Here are the JavaScript notations for most common vendors:


I reset inline transform styles like: = ""; = ""; = ""; = ""; = "";

And like this using jQuery:


See blog post Coding Vendor Prefixes with JavaScript (2012-03-21).

Solution 3:

Try using = "rotate(60deg)"

Solution 4:

If you want to do it via setAttribute you would change the style attribute like so:

element.setAttribute('style','transform:rotate(90deg); -webkit-transform: rotate(90deg)') //etc

This would be helpful if you want to reset all other inline style and only set your needed style properties’ values again, BUT in most cases you may not want that. That’s why everybody advised to use this: = 'rotate(90deg)'; = 'rotate(90deg)';

The above is equivalent to['transform'] = 'rotate(90deg)';['-webkit-transform'] = 'rotate(90deg)';

Solution 5:

To animate your 3D object, use the code:



    var x = 100;
    var y = 0;
    x += 1;
    y += 1;
    var element = document.getElementById('cube'); = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
//for other browsers use:   "msTransform",    "OTransform",    "transform"