Comment pouvez-vous modifier "-webkit-" des propriétés CSS préfixées dans jQuery?

Question

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

Cela jette l'erreur:

Uncaught SyntaxError: Jeton inattendu -

J'espère vraiment que je n'aurai pas à installer le plugin jQuery Rotation juste pour cette instance.

Answer 1

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

Answer 2

Citez-les:

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

Answer 3

Juste un peu plus au courant des réponses: Si vous utilisez jQuery 1.8 vous n'avez pas à ajouter les préfixes de vous-même. jQuery ajoute automatiquement le préfixe approprié pour vous.

Cela signifie que ce code sera suffisant:

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

Vous n'aurez pas à vous inquiéter au sujet de l'ajout de nouveaux préfixes ou les supprimer si le navigateur adapté le unprefixed de la propriété. :)

Ici's d'une démonstration en direct. Si vous visitez la page avec un Navigateur WebKit et inspecter le corps, vous pouvez voir que jQuery ajouté -webkit-transform: rotate(180deg); comme un style.

Jetez un oeil à l' Automatique CSS préfixation de l'article ici: http://blog.jquery.com/2012/08/09/jquery-1-8-released/

Answer 4

Juste pour ajouter un peu plus de variété à la liste des réponses, vous pouvez aussi faire

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

Les tirets dans les noms de propriété CSS sont convertis en camelCase dans JS pour des raisons de compatibilité. Ainsi, lorsque vous utilisez '-webkit-transform' (comme dans les exemples ci-dessus), jQuery convertit simplement cela en WebkitTransform en interne.

Answer 5

La nouvelle façon de formater les virgules:

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