CSS3矩阵旋转

Question

我有一个CSS 3D立方体,我正试图向左/右/向上/向下旋转,因为它看起来像用户.如果我使用css rotation函数,那么我旋转轴,而不是立方体.

网上有很多关于X,Y,Z矩阵旋转计算的文章,但我现在花了好几天试图设置这个东西,这些信息都没有真正帮助我.

解决我的问题的方法是一个WebKitCSSMatrix对象,它有自己的旋转功能,可以起到魔力的作用.关于小提琴的一个例子:http://jsfiddle.net/joecritch/tZBDW/.但同样,这只依赖于Uppon Webkit,但我需要在这里进行交叉的讨论.

现在,成功的方法有三个步骤:

1)我需要获得当前矩阵,设置方向向量(上/下为1,0,0,左/右旋转为0,1,0)并设置角度.DONE.

2)我需要根据当前矩阵计算新的旋转矢量.DONE.

3)我需要通过新的矢量和角度实际旋转当前矩阵.问题.

var newMArray = deMatrix(".cube");//getting current matrix from CSS

var v = [vecX, vecY, vecZ, 0];//current vector (1,0,0) or (0,1,0)

var newV = newMVector(newMArray, v);//calculating new vector for current matrix

//getting the angle for each axis based on new vector
angleX = newV[0]*angle;
angleY = newV[1]*angle;
angleZ = newV[2]*angle;

this.rotateX -= angleX;
this.rotateY -= angleY;
this.rotateZ -= angleZ; 

//calculating the rotation matrix
var rotationXMatrix, rotationYMatrix, rotationZMatrix, s, transformationMatrix;
rotationXMatrix = $M([[1, 0, 0, 0], [0, Math.cos(this.rotateX * deg2rad), Math.sin(-this.rotateX * deg2rad), 0], [0, Math.sin(this.rotateX * deg2rad), Math.cos(this.rotateX * deg2rad), 0], [0, 0, 0, 1]]);
rotationYMatrix = $M([[Math.cos(this.rotateY * deg2rad), 0, Math.sin(this.rotateY * deg2rad), 0], [0, 1, 0, 0], [Math.sin(-this.rotateY * deg2rad), 0, Math.cos(this.rotateY * deg2rad), 0], [0, 0, 0, 1]]);
rotationZMatrix = $M([[Math.cos(this.rotateZ * deg2rad), Math.sin(-this.rotateZ * deg2rad), 0, 0], [Math.sin(this.rotateZ * deg2rad), Math.cos(this.rotateZ * deg2rad), 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]]);

transformationMatrix = rotationXMatrix.x(rotationYMatrix).x(rotationZMatrix);//getting all axis rotation into one matrix

我正在为CSS Cube设置新的转换矩阵.问题是 - 它不会旋转.现在我使用Sylvester插件进行所有矩阵计算.

所以,请帮助我如何使用我的新矢量进行正确的矩阵旋转.

Answer 1

Sylvester也可以生成旋转矩阵。查看小提琴示例 - 似乎执行旋转的 webkit 函数：

// Rotate the Matrix around the transformed vector
var newMatrix = m.rotateAxisAngle(vector.x, vector.y, vector.z, angle);

看起来它更符合函数的思路Matrix.Rotation(angle [, axis])，我认为您应该提供axisSylvester Vector 对象，而不是 webkit x,y,z 参数 - http://sylvester.jcoglan.com/api/matrix.html#回转

将 x,y,z 矩阵相乘效果不太好，因为额外的变换将应用于新的上下文。我刚刚陷入这个 js/canvas 页面的陷阱：http://benjaminbenben.com/projects/twittny_test/