在jQuery中使用css transform属性

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

其次,浏览器支持越来越好,但您可能仍需要使用这样的供应商前缀:

$('.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/

Answer 2

设置-vendor旧浏览器不支持的前缀可能会导致它们抛出异常.css.而是首先检测支持的前缀:

// Start with a fall back
var newCss = { 'zoom' : ui.value };

// Replace with transform, if supported
if('WebkitTransform' in document.body.style) 
{
    newCss = { '-webkit-transform': 'scale(' + ui.value + ')'};
}
// repeat for supported browsers
else if('transform' in document.body.style) 
{
    newCss = { 'transform': 'scale(' + ui.value + ')'};
}

// Set the CSS
$('.user-text').css(newCss)

这适用于旧浏览器.我已经在scale这里做了,但你可以用你想要的任何其他变换替换它.