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

you can use regex to get a map of property-value:

if variable transformstyle contains the style value

  //get all transform declarations
 (transformstyle.match(/([\w]+)\(([^\)]+)\)/g)||[]) 
      //make pairs of prop and value         
     .map(function(it){return it.replace(/\)$/,"").split(/\(/)})
     //convert to key-value map/object         
     .reduce(function(m,it){return m[it[0]]=it[1],m},{})

for:

var transformstyle="-webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px)"

you would get:

{scale: "1.1", rotateY: "7deg", translateZ: "-1px"}