How to read/parse individual transform style values in JavaScript?

Question

Webkit\'s blog post from last year on 3D transforms explains the various transform \'functions\' that can be used in the -webkit-transform property. For example:

<         


        

Answer 1

I ran into this issue this morning. It appears that JavaScript can't read an element's style.webkitTransform property until it's been explicitly set in the element's style attribute (either inline in the HTML or procedurally via JavaScript). As kludgy as this sounds, if you need JS to be able to read CSS transform properties, you might be better off defining their initial values with JavaScript when the DOM is ready.

Example, using jQuery:

$(document).ready(function(){
    $('.transform').css('webkitTransform', 'translateX(0)');
});

From this point forward, you'll be able to read the element's transform string and parse through it for the needed values.