javascript - 在 jQuery 中使用 css 转换属性

Question

您如何使用 jQuery 指定跨浏览器转换控件，因为每个浏览器似乎都使用自己的方法？

这是我在 Firefox 上使用的代码，但我什至无法让它工作。我认为这是因为无法判断要使用哪种变换(缩放、旋转、倾斜)。

$(".oSlider-rotate").slider({
     min: 10,
     max: 74,
     step: .01,
     value: 24,
     slide: function(e,ui){
                 $('.user-text').css('transform', ui.value)

            }                
  });

Answer 1

如果你想使用特定的转换函数，那么你需要做的就是在值中包含该函数。例如:

$('.user-text').css('transform', 'scale(' + ui.value + ')');

其次，浏览器支持越来越好，但您可能仍需要像这样使用 vendor 前缀:

$('.user-text').css({
  '-webkit-transform' : 'scale(' + ui.value + ')',
  '-moz-transform'    : 'scale(' + ui.value + ')',
  '-ms-transform'     : 'scale(' + ui.value + ')',
  '-o-transform'      : 'scale(' + ui.value + ')',
  'transform'         : 'scale(' + ui.value + ')'
});

jsFiddle 示例:http://jsfiddle.net/jehka/230/