3D CSS & Javascript

programming web dev
1

Hello > this is a rather boring x-browser question ::

I am making a simple 3D effect to mouse position, using CSS transformations. I am updating the math via javascript setInterval, and using jQuery to change the 3D of the CSS.

So it works great, but my question is - In CSS, -webkit… -moz etc are ruled out of the style sheet depending on the browser type - But as Im now changing the values in JS and jQ, My code is effectively processing the code x4 times because it has to before browser decides whether it wants it that code or not …

Is this eating up a lot of processing? Ive tested this out - and some computers handle it - some dont… Is there a way in jquery to only read the code what is neccessary for the particular browser?

$('#element').css({
            '-webkit-transform':'rotate3d(' + tilty + ', ' + tiltx + ', 0, ' + degree + 'deg)',
            '-moz-transform':'rotate3d(' + tilty + ', ' + tiltx + ', 0, ' + degree + 'deg)',
            '-o-transform': 'rotate3d(' + tilty + ', ' + tiltx + ', 0, ' + degree + 'deg)',
            '-ms-transform': 'rotate3d(' + tilty + ', ' + tiltx + ', 0, ' + degree + 'deg)'
});

there’s definitely too much going on … ?!