css3 converting matrix3d values

Question

I want to know how to get the rotateX and rotateY values of a matrix3d such as this:

matrix3d(0.9999999970415847, 0, 0.00007692093651178932, 0, 0, 1, 0, 0, -0.00007692093651178932, 0, 0.9999999970415847, 0, 0, 0, 300, 1)

does anybody know how to this ? I would really appreciate the help especially since I am not really the math type of person. thnx!

methodofaction · Accepted Answer · 2012-01-17 09:13:22Z

5

I'm not good at math either, so this needs some checking by someone with more knowledge than me:

var matrix = new WebKitCSSMatrix(el.style.webkitTransform);
var rotationX = Math.acos(matrix.a) * (180/pi);
var rotationY = Math.asin(matrix.b) * (180/pi);

You can view a demo here:

http://jsfiddle.net/YsCF5/

answered Jan 17, 2012 at 9:13

methodofaction

72.7k22 gold badges159 silver badges166 bronze badges

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

1 Comment

dudewad Over a year ago

A quick note, this was written a long time ago and the CSSMatrix feature was a non-standard proposal. MDN now recommends the following: developer.mozilla.org/en-US/docs/Web/API/DOMMatrix

Collectives™ on Stack Overflow

css3 converting matrix3d values

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related