在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 ，但你可以用你想要的任何其他變換替換它。

Answer 3

如果你正在使用jquery，jquery.transit是一個非常簡單和強大的lib，它允許你在處理跨瀏覽器兼容性的同時進行轉換。 它可以這么簡單： $("#element").transition({x:'90px'}) 。

從以下鏈接中獲取： http ： //ricostacruz.com/jquery.transit/

Answer 4

我開始使用http://leaverou.github.io/prefixfree上提供的“無前綴”腳本，因此我不必關心供應商前綴。 它巧妙地為您在幕后設置正確的供應商前綴。 另外還有一個jQuery插件，所以仍然可以使用jQuery的.css（）方法而無需更改代碼，因此建議的行與前綴無關將是您所需要的：

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