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)

            }                
  });

Take a look at jQuery CSS Hooks

elclanrs
– elclanrs

2012-05-29 23:37:05 +00:00
Commented May 29, 2012 at 23:37 — elclanrs
– elclanrs, Commented May 29, 2012 at 23:37

Christian · Accepted Answer · 2014-09-06 11:59:05Z

120

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/

edited Sep 6, 2014 at 11:59

answered May 29, 2012 at 23:35

Christian

19.8k3 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Christian Over a year ago

That only affects IE, which we're not targeting anyway :p

arttronics Over a year ago

Clarification: The OP wrote cross browser transform.

Christian Over a year ago

Removing the comma doesn't make it fully cross browser, neither the -moz nor -webkit vendor prefixes apply to IE. My code serves as an example of how to apply the properties. If you don't like it, feel free to write your own answer :)

arttronics Over a year ago

This SO answer explains that the extra comma is against ES5 spec with regards to cross-browser syntax. Just sayin. :p

Christian Over a year ago

That answer shows that a trailing comma is valid in the ES5 spec.

|

Keith · Accepted Answer · 2013-08-07 11:17:02Z

8

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.

answered Aug 7, 2013 at 11:17

Keith

157k82 gold badges314 silver badges453 bronze badges

2 Comments

PandaWood Over a year ago

I noticed that the property starts with lower case 'w' -> ie 'webkitTransform' but it works with upper case anyhow, somehow

George Reith Over a year ago

@PandaWood both properties exist

Monero Jeanniton · Accepted Answer · 2017-03-01 13:43:01Z

2

If you're using jquery, jquery.transit is very simple and powerful lib that allows you to make your transformation while handling cross-browser compability for you. It can be as simple as this : $("#element").transition({x:'90px'}).

Take it from this link : http://ricostacruz.com/jquery.transit/

edited Mar 1, 2017 at 13:43

answered Jul 19, 2014 at 3:45

Monero Jeanniton

49710 silver badges26 bronze badges

Comments

Philip Jespersen · Accepted Answer · 2014-09-18 19:58:12Z

1

I started using the 'prefix-free' Script available at http://leaverou.github.io/prefixfree so I don't have to take care about the vendor prefixes. It neatly takes care of setting the correct vendor prefix behind the scenes for you. Plus a jQuery Plugin is available as well so one can still use jQuery's .css() method without code changes, so the suggested line in combination with prefix-free would be all you need:

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

edited Sep 18, 2014 at 19:58

answered Sep 18, 2014 at 16:04

Philip Jespersen

2,8362 gold badges20 silver badges9 bronze badges

Comments

Dharman · Accepted Answer · 2019-10-09 12:47:16Z

1

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

            }                
  });

This will solve the issue

edited Oct 9, 2019 at 12:47

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 9, 2019 at 12:45

Amanverma Lucky

311 bronze badge

1 Comment

cronoik Over a year ago

Thank you participating at stackoverflow. Please add some explanation to your answer to make it useful for others.

Collectives™ on Stack Overflow

Using css transform property in jQuery

5 Answers 5

7 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related