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

如果浏览器调整了未加前缀的属性，您不必担心添加新前缀或删除它们。：）

Here是一个现场演示。如果您使用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。

Answer 5

格式化逗号的新方法：

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

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

5 个答案: