你如何在jQuery中调整"-webkit-"前缀CSS属性？

Question

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

这是抛出错误:

未捕获的SyntaxError:意外的令牌 -

我真的希望我不必为这个实例安装jQuery Rotation插件.

Answer 1

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

Answer 2

引用他们:

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

Answer 3

只是对当前答案的一点补充:如果你使用jQuery 1.8,你不必自己添加前缀.jQuery会自动为您添加适当的前缀.

这意味着这段代码就足够了:

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

如果浏览器调整了未加前缀的属性,您不必担心添加新前缀或删除它们.:)

这是一个现场演示.如果您使用WebKit浏览器访问该页面并检查正文,则可以看到jQuery已添加-webkit-transform: rotate(180deg);为样式.

请看一下自动CSS前缀部分:http://blog.jquery.com/2012/08/09/jquery-1-8-released/

Answer 4

只是为了在答案列表中添加更多变化,您也可以这样做

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

为了兼容性,CSS属性名称中的虚线转换为JS中的camelCase,因此当您使用'-webkit-transform'时(如上例所示),jQuery只是在内部将其转换为WebkitTransform.