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 Jul 12 '13 at 06:06 — Muhammad Umer, Jul 12 '13 at 06:06

score 217 · Accepted Answer · edited Jun 15 '19 at 04:23

217

The JavaScript style names are WebkitTransformOrigin and WebkitTransform

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

Check the DOM extension reference for WebKit here.

edited Jun 15 '19 at 04:23

Cœur

37,241
25
195
267

answered Apr 02 '09 at 09:08

Ólafur Waage

68,817
22
142
198

10

If you want more then one, seperate with a space For example: `element.style.webkitTransform = "rotate(-2deg) translateX(100px)";` – Marc Nov 09 '12 at 10:25
1

This works fine on Safari and Chrome, but won't work on Firefox. What is the equivalent way of doing this for Firefox? – Ricardo Sanchez-Saez Jan 13 '13 at 20:58
3

MozTransform should be your friend. – haagmm Jan 16 '13 at 03:53
@Olafur The Apple link is dead. – Carcigenicate Feb 25 '16 at 22:27
So is the only way to do this with a string. Seems like it would be pretty slow if it was recursive. – BBaysinger Dec 03 '18 at 22:10
I don't know how to fix the first link: it's not available on internet archive. Closest I could find is https://developer.apple.com/documentation/webkitjs/webkitcssmatrix paragraph, or Mozilla doc at https://developer.mozilla.org/en-US/docs/Web/CSS/transform – Cœur Jun 15 '19 at 04:24

score 94 · Answer 2 · edited Nov 26 '16 at 13:39

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 '16 at 13:39

Peter Mortensen

30,738
21
105
131

answered Jan 29 '13 at 15:00

Armel Larcier

15,747
7
68
89

5

jQuery automatically picks the right prefix, only have to write `transform`. – Blaise Jun 01 '15 at 13:20
@Blaise That is new. Starting from what version? – Armel Larcier Jun 01 '15 at 13:55
1

It does since jQuery 1.8.0. [Commit on Github](https://github.com/jquery/jquery/commit/5376a809c0d2bee4b7872847c2821e458dfdcc3b) – Blaise Jun 01 '15 at 16:33
1

`win.style.transform ="translate(-50%)"` not working – Momin Dec 20 '17 at 04:02

score 12 · Answer 3 · answered Apr 02 '09 at 09:07

12

Try using

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

answered Apr 02 '09 at 09:07

Andrei Serdeliuc ॐ

5,828
5
39
66

score 6 · Answer 4 · answered Apr 27 '15 at 01:10

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

score 2 · Answer 5 · edited Feb 16 '16 at 12:15

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>

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

5 Answers5

Linked

Related