How to set the style transform using Javascript?

Question

i want to add the transform: scale() property using Javascript. but for transform prefix not working :

var $square = $('#homepage');
$square.css('zoom', r);
$square.css('-moz-transform', 'scale(' + r + ')');
$square.css(  '-o-transform', 'scale(' + r + ')');

Rus Mine · Accepted Answer · 2015-11-18 10:14:48Z

3

Try this

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

Or jquery:

$(element).css({
    "webkitTransform":"",
    "MozTransform":"",
    "msTransform":"",
    "OTransform":"",
    "transform":""
});

edited Nov 18, 2015 at 10:14

answered Nov 18, 2015 at 10:08

Rus Mine

1,5931 gold badge19 silver badges29 bronze badges

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

1 Comment

Pancho Over a year ago

not sure why no-one has upvoted you before. this works a treat for me across all major browsers (tests successfully back to IE9 inclusive)

Gaza · Accepted Answer · 2015-11-18 09:54:31Z

2

Try using something like this:

element.style.webkitTransform = "scale()";

answered Nov 18, 2015 at 9:54

Gaza

4272 gold badges4 silver badges17 bronze badges

3 Comments

Afrgun Over a year ago

how about with -moz-, -o- ?

user663031 Over a year ago

Isn't it invalid to have scale with no parameter?

Gaza Over a year ago

replace the webkitTransform with Moz or MS etc... and the scale() was just an example, i think he knows to add the parameter back in :)

Dave Salomon · Accepted Answer · 2015-11-18 10:04:59Z

0

Since jQuery 1.8, there is no need to include vendor prefixes - jQuery will do this automatically, if required. Vendor prefixes are becoming less required as support for CSS3 increases.

If you are using < 1.8, then you probably need to manually amend the style attribute.

var $h = $('#h');
$h.css({
    background:'#f00'
});
var s = $h.attr('style');
s += '-moz-transform: scale(2);';
$h.attr('style',s);

answered Nov 18, 2015 at 10:04

Dave Salomon

3,2771 gold badge19 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to set the style transform using Javascript?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related