Tengo un CSS cubo 3D que estoy tratando de girar a la izquierda/derecha/arriba/abajo directamente, ya que aparece para el usuario. Si puedo usar css rotation funciones, entonces me gire el eje, no el cubo.
Hay un montón de artículos en la web sobre X,Y,Z de la matriz de rotación de cálculo, pero he de pasar días tratando de establecer esta cosa y ninguna de esta información me ayuda mucho.
El trabajo en torno a mi sería un problema WebKitCSSMatrix objeto, que tiene sus propias funciones de rotación que funcionan como magia. Un ejemplo en el Violín: http://jsfiddle.net/joecritch/tZBDW/. Pero, de nuevo, que se basa sólo en Webkit, pero necesito estar crossbrowsy aquí.
Ahora, hay 3 pasos en el camino hacia el éxito:
1) necesito para obtener la matriz actual, set vector direccional (1,0,0 para arriba/abajo y 0,1,0 a la derecha/izquierda rotaciones) y ajustar el ángulo. HECHO.
2) necesito calcular la nueva rotación del vector basado en la matriz actual. HECHO.
3) tengo que rotan mi matriz actual por el nuevo vector y el ángulo. PROBLEMA.
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
De lo que estoy configuración de la nueva matriz de transformación para mi CSS Cubo. El problema es, que no gira como debe. Ahora estoy usando Sylvester plugin para hacer todo el cálculo matricial.
Así que, por favor, ayúdame sobre cómo usar mi nuevo vector para una adecuada matriz de rotación.
