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

Question

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?

wont you set style attribute instead of just this one

Muhammad Umer
– Muhammad Umer

2013-07-12 06:06:08 +00:00
Commented Jul 12, 2013 at 6:06 — Muhammad Umer
– Muhammad Umer, Commented Jul 12, 2013 at 6:06

Cœur · Accepted Answer · 2019-06-15 04:23:35Z

216

The JavaScript style names are WebkitTransformOrigin and WebkitTransform

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

Check the DOM extension reference for WebKit here.

edited Jun 15, 2019 at 4:23

Cœur

39k25 gold badges207 silver badges282 bronze badges

answered Apr 2, 2009 at 9:08

Ólafur Waage

70.2k22 gold badges147 silver badges199 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Marc Over a year ago

If you want more then one, seperate with a space For example: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

Ricardo Sanchez-Saez Over a year ago

This works fine on Safari and Chrome, but won't work on Firefox. What is the equivalent way of doing this for Firefox?

haagmm Over a year ago

MozTransform should be your friend.

Carcigenicate Over a year ago

@Olafur The Apple link is dead.

BBaysinger Over a year ago

So is the only way to do this with a string. Seems like it would be pretty slow if it was recursive.

|

Peter Mortensen · Accepted Answer · 2016-11-26 13:39:49Z

94

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).

edited Nov 26, 2016 at 13:39

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 29, 2013 at 15:00

Armel Larcier

16k7 gold badges70 silver badges89 bronze badges

4 Comments

Blaise Over a year ago

jQuery automatically picks the right prefix, only have to write transform.

Armel Larcier Over a year ago

@Blaise That is new. Starting from what version?

Blaise Over a year ago

It does since jQuery 1.8.0. Commit on Github

Momin Over a year ago

win.style.transform ="translate(-50%)" not working

Andrei Serdeliuc ॐ · Accepted Answer · 2009-04-02 09:07:26Z

12

Try using

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

answered Apr 2, 2009 at 9:07

Andrei Serdeliuc ॐ

5,8785 gold badges41 silver badges66 bronze badges

Comments

thednp · Accepted Answer · 2015-04-27 01:10:19Z

6

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)';

answered Apr 27, 2015 at 1:10

thednp

4,4794 gold badges36 silver badges51 bronze badges

Comments

Phiter · Accepted Answer · 2016-02-16 12:15:12Z

2

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>

edited Feb 16, 2016 at 12:15

Phiter

15k14 gold badges52 silver badges87 bronze badges

answered Feb 16, 2016 at 11:55

Dhruv Dholakia

232 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

6 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related