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

user_414088 0
Viewed 20925

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:

#myDiv {
  -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
}

My question: how do you access individual values in JavaScript? When you read the webkitTransform property of the element, you just get a matrix3d() function with 16 values in it, like this...

matrix3d(0.958684, 0.000000, .....)

Is there a way to just read the value of an individual transform thing, like rotateY()? Or do I have to read it from the matrix3d() string, and how?

transform webkit 3d css javascript
11 Answers

If you want the complete transformation, you can indeed use getComputedStyle(element).transform.

But anyway, just use DOMMatrix constructor: new DOMMatrix(element.style.transform). And you're done.

user_7250210
Related