Controlling CSS cube rotation(transform) and extracting values from 3d matrix

Question

I made CSS cube that I\'m rotating using up/down and left/right keys but I\'m having problems regarding rotation direction.

Attempt #1

DEMO

Using t

Answer 1

Demo 2 is almost there. Your problem is that you're using the intermediate animation state of the cube to calculate the new position:

var matrix = new WebKitCSSMatrix(cube.css('webkitTransform'));

Instead, you should store and update an internal target matrix:

Additionally, it seems that this snippet of code:

var vector = matrix.transformVector(vector);
var newMatrix = matrix.rotateAxisAngle(vector.x, vector.y, vector.z, angle);

Doesn't work as intended. This does what you're looking for:

var newMatrix = new WebKitCSSMatrix().rotateAxisAngle(...).multiply(matrix)

http://codepen.io/eric-wieser/pen/BoeyD