CODEWITHSUNDEEP
javascriptwebkit
rymn
rymn

Reputation: 1499

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?

Upvotes: 125

Views: 228625

Answers (5)

Ólafur Waage
Ólafur Waage

Reputation: 69991

The JavaScript style names are WebkitTransformOrigin and WebkitTransform

element.style.webkitTransform = "rotate(-2deg)";

Check the DOM extension reference for WebKit here.

Upvotes: 216

Armel Larcier
Armel Larcier

Reputation: 16027

Here are the JavaScript notations for most common vendors:

webkitProperty
MozProperty
msProperty
OProperty
property

I reset inline transform styles like:

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

And like this using jQuery:

$(element).css({
    "webkitTransform":"",
    "MozTransform":"",
    "msTransform":"",
    "OTransform":"",
    "transform":""
});

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

Upvotes: 94

Dhruv Dholakia
Dhruv Dholakia

Reputation: 23

To animate your 3D object, use the code: 

<script>

$(document).ready(function(){

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

});

</script>

Upvotes: 2

thednp
thednp

Reputation: 4479

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:

element.style.transform = 'rotate(90deg)';
element.style.webkitTransform = 'rotate(90deg)';

The above is equivalent to

element.style['transform'] = 'rotate(90deg)';
element.style['-webkit-transform'] = 'rotate(90deg)';

Upvotes: 6

Andrei Serdeliuc ॐ
Andrei Serdeliuc ॐ

Reputation: 5878

Try using

img.style.webkitTransform = "rotate(60deg)"

Upvotes: 12

Related Questions