javascript access of css transforms for opera and ie

Question

i am making this global function which will simply change an element's transform property. This is what i have.

function transform(element, value) {
    if(element.style.webkitTransform) element.style.webkitTransform = value;
    else if(element.style.MozTransform) element.style.MozTransform = value;
}

I also want to add opera and ie to the above function. i have opera running with me so i can test opera but i dont have ie 9. Also i cant figure out how can i access opera's either. Can anyone please help?

I want something like this

function transform(element, value) {
    if(element.style.webkitTransform) element.style.webkitTransform = value;
    else if(element.style.MozTransform) element.style.MozTransform = value;
    else if(element.style.msTransform) element.style.msTransform = value;
    else if(element.style.oTransform) element.style.oTransform = value;
}

Hi, Perhaps you could use some well-known js framework, such as jQueryUi, where all this stuff is already implemented, with nice performances. — vaugham
– vaugham, Commented Jan 16, 2012 at 22:53
@vaugham yes, i am aware of jQuery but i am trying to move away from it. Plus its not production code, i am still learning this stuff.. so i guess i should use the new stuff instead of jquery. — Achshar
– Achshar, Commented Jan 16, 2012 at 22:56

seth.miller · Accepted Answer · 2012-01-16 23:16:57Z

9

You can always just set them all. The other browsers will ignore styles they cannot understand.

function transform(element, value) {
    element.style.webkitTransform = value;
    element.style.MozTransform = value;
    element.style.msTransform = value;
    element.style.OTransform = value;
}

edited Jan 16, 2012 at 23:16

answered Jan 16, 2012 at 23:02

seth.miller

1,98617 silver badges23 bronze badges

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

5 Comments

Achshar Over a year ago

but that will throw an error in console, right? also i have opera and oTransform does not seem to be working :O

Achshar Over a year ago

ok it doesn't throw error but the oTransform is definitely not working in latest opera. and i can't check ie because i dont have ie9 installed on my machine.

seth.miller Over a year ago

@Achshar : Try element.style.OTransform = value;

Achshar Over a year ago

yup! apparently it requires capital O. Thanks!

Ωmega Over a year ago

+1 :: Can you please list also alternatives for *transform-origin parameter(s)? Thank you.

Roger · Accepted Answer · 2017-03-09 17:05:40Z

0

With older versions of Opera, based on Presto engine, you should do forced precision to reduce the side effects of the 'early' implementation of CSS 2D transforms, such as:

var action = "scale(" + value.toPrecision(4) + ")";
element.style.transform = action;
element.style.oTransform = action;

I don't believe this has negative impact on modern implementations.

edited Mar 9, 2017 at 17:05

answered Mar 9, 2017 at 16:36

Roger

4014 silver badges9 bronze badges

Collectives™ on Stack Overflow

javascript access of css transforms for opera and ie

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related