How do you tweak "-webkit-" prefixed CSS properties in jQuery?

Question

$(this).css({
    -webkit-transform:'rotate(180deg)',
    -moz-transform: 'rotate(180deg)',
    -o-transform: 'rotate(180deg)',
    -ms-transform: 'rotate(180deg)'
});

This is throwing the error:

Uncaught SyntaxError: Unexpected token -

I'm really hoping I don't have to install the jQuery Rotation plugin just for this one instance.

if you ever get tired of writing those prefixes in your stylesheets, then check this out leaverou.github.com/prefixfree — Martin Larsson
– Martin Larsson, Commented Nov 24, 2011 at 20:59

Justin808 · Accepted Answer · 2011-10-28 23:15:47Z

84

$(this).css({
    '-webkit-transform':'rotate(180deg)',
    '-moz-transform': 'rotate(180deg)',
    '-o-transform': 'rotate(180deg)',
    '-ms-transform': 'rotate(180deg)'
});

answered Oct 28, 2011 at 23:15

Justin808

21.7k49 gold badges166 silver badges275 bronze badges

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

Comments

Ry- · Accepted Answer · 2011-10-28 23:16:28Z

80

Quote them:

$(this).css({
    '-webkit-transform': 'rotate(180deg)',
    '-moz-transform':    'rotate(180deg)',
    '-o-transform':      'rotate(180deg)',
    '-ms-transform':     'rotate(180deg)'
});

answered Oct 28, 2011 at 23:16

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Comments

js-coder · Accepted Answer · 2012-08-19 16:53:20Z

25

Just a little addition to the current answers: If you use jQuery 1.8 you don't have to add the prefixes yourself. jQuery will automatically add the appropriate prefix for you.

That means that this code will be enough:

$(this).css('transform', 'rotate(180deg)');

You won't have to worry about adding new prefixes or removing them if the browser adapted the unprefixed property. :)

Here's a live demo. If you visit the page with a WebKit Browser and inspect the body, you can see that jQuery added -webkit-transform: rotate(180deg); as a style.

Take a look at the Automatic CSS prefixing section here: http://blog.jquery.com/2012/08/09/jquery-1-8-released/

edited Aug 19, 2012 at 16:53

answered Jun 23, 2012 at 15:55

js-coder

8,34410 gold badges44 silver badges59 bronze badges

Comments

lucideer · Accepted Answer · 2012-06-16 20:51:26Z

11

Just to add a little more variety to the list of answers, you can also do

$(this).css({
    WebkitTransform: 'rotate(180deg)',
    MozTransform:    'rotate(180deg)',
    OTransform:      'rotate(180deg)',
    msTransform:     'rotate(180deg)',
    transform:       'rotate(180deg)'
});

Dashes in CSS property names are converted to camelCase in JS for compatibility., so when you use '-webkit-transform' (as in the above examples), jQuery just converts that to WebkitTransform internally.

answered Jun 16, 2012 at 20:51

lucideer

3,86728 silver badges32 bronze badges

Comments

chovy · Accepted Answer · 2011-10-29 02:29:37Z

2

The new hip way to format commas:

$(this).css({
    '-webkit-transform': 'rotate(180deg)'
    , '-moz-transform':    'rotate(180deg)'
    , '-o-transform':      'rotate(180deg)'
    , '-ms-transform':     'rotate(180deg)'
});

answered Oct 29, 2011 at 2:29

chovy

76.2k63 gold badges249 silver badges325 bronze badges

7 Comments

Dakine83 Over a year ago

Is there any reason for this? It seems silly, but then most hipster things do :)

Bassam Over a year ago

I like this formatting, as it allows you to cut and paste lines of code without having to add or remove commas from the previous line.

Dakine83 Over a year ago

Except for the first line, whereas the standard formatting lets you cut and paste without adding or removing commas... except for the last line. If it ain't broke...

Bassam Over a year ago

Fair enough. I see now that the traditional formatting is superior, since the first line and any other lines aside from the last would be interchangeable.

Richard Ayotte Over a year ago

Leading commas is less error prone and easier to manage because most the work happens at the bottom of the stack. Once you get this //commenting a line out is easier, cutting and pasting is easier and seeing the leading comma will help avoid errors by making them more obvious.

|

Collectives™ on Stack Overflow

How do you tweak "-webkit-" prefixed CSS properties in jQuery?

5 Answers 5

Comments

Comments

Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related