CODEWITHSUNDEEP
jquerycss
RGBK
RGBK

Reputation: 2048

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

$(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.

Upvotes: 42

Views: 13676

Answers (5)

js-coder
js-coder

Reputation: 8346

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/

Upvotes: 25

lucideer
lucideer

Reputation: 3882

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.

Upvotes: 11

chovy
chovy

Reputation: 75666

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

Upvotes: 2

Ry-
Ry-

Reputation: 224904

Quote them:

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

Upvotes: 80

Justin808
Justin808

Reputation: 21512

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

Upvotes: 84

Related Questions