Как вы настраиваете свойства "-webkit-" с префиксом CSS в jQuery?

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

Это вызывает ошибку:

Неподготовленный SyntaxError: Неожиданный токен -

Я действительно надеюсь, что мне не нужно устанавливать плагин jQuery Rotation только для этого одного экземпляра.

Ответы

Ответ 1

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

Ответ 2

Процитировать:

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

Ответ 3

Небольшое дополнение к текущим ответам: если вы используете jQuery 1.8, вам не нужно добавлять префиксы самостоятельно. jQuery автоматически добавит вам соответствующий префикс.

Это означает, что этого кода будет достаточно:

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

Вам не придется беспокоиться о добавлении новых префиксов или их удалении, если браузер адаптировал свойство unprefixed.:)

Здесь живая демонстрация. Если вы заходите на страницу с помощью браузера WebKit и проверяете тело, вы можете увидеть, что jQuery добавлен -webkit-transform: rotate(180deg); в качестве стиля.

Взгляните на раздел префикса автоматического CSS здесь: http://blog.jquery.com/2012/08/09/jquery-1-8-released/

Ответ 4

Чтобы добавить немного больше разнообразия в список ответов, вы также можете сделать

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

Десны в именах свойств CSS преобразуются в camelCase в JS для совместимости., поэтому, когда вы используете '-webkit-transform' (как в приведенных выше примерах), jQuery просто преобразует это в WebkitTransform внутренне.

Ответ 5

Новый формат hip для форматирования запятых:

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