Using css transform property in jQuery

Question

How can you specify cross-browser transform controls using jQuery since each browser seems to use its own methodology?

Here is the code I am using for Firefox but I can't even get it to work. I think it's because there is no way to tell which transformation – scale, rotate, skew – to use.

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

Answer 1

If you want to use a specific transform function, then all you need to do is include that function in the value. For example:

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

Secondly, browser support is getting better, but you'll probably still need to use vendor prefixes like so:

$('.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 with example: http://jsfiddle.net/jehka/230/

Answer 2

Setting a -vendor prefix that isn't supported in older browsers can cause them to throw an exception with .css. Instead detect the supported prefix first:

// 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) 

That works in old browsers. I've done scale here but you could replace it with whatever other transform you wanted.