Afrgun
Afrgun

Reputation: 313

How to set the style transform using Javascript?

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

Upvotes: 3

Views: 2368

Answers (3)

Rus Mine
Rus Mine

Reputation: 1583

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":""
});

Upvotes: 3

Dave Salomon
Dave Salomon

Reputation: 3297

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

Upvotes: 0

Gaza
Gaza

Reputation: 427

Try using something like this:

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

Upvotes: 2

Related Questions