我有一个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, …好的,所以我试图通过设置百分比指标的"正在加载..."消息来完成我的项目.很容易.问题是我有超过6,000 Raphael/SVG行代码注入2000多个新节点DOM.因此,当我尝试在加载消息时更改我的%指示符时,真正的问题出现了,但浏览器只是冻结,直到Raphael完成创建所有节点.
我尝试过的和我所知道的:
1)我有非常简单的函数来计算加载百分比,通过增加countvar并在我的6000个代码中传播这个函数.这样我模拟了实际的加载过程.没什么新鲜的.
2)我知道这个函数可以起到魔力的作用,通过加载过程,我实际上从零到100%-hero.
3)在这个函数中,每次我获得新值 - 我都试图在屏幕上更新% - 但是当我立即获得100%时,直到满页加载都没有任何反应.
4)我可以让我的指标更新的唯一方法是alert()每次我尝试更新它时设置.当警报弹出窗口进入屏幕时,这就是改变我的指示器的魔法灰尘.
5)我已经尝试过setTimeout很多其他的东西,比如切换visibility,更改position,创建子节点,运行虚拟循环等......在SVG渲染过程中没有任何帮助...... 一切都只是零度冻结.
6)唯一不会卡在屏幕上的是我的小CSS动画(带有暗区的旋转圆圈)(好吧,除了FF - 甚至没有CSS动画).
7)我从其他来源了解到我无法模仿alert()我自己的行为,所以这里没有运气.
8)我试过defer和async,但我没有装载问题,我有渲染/ DOM注入的问题...
我想这就是我想在完美条件下得到的东西:
1)我想知道 - 如何确定每个svg节点注入/操作？
2)那么,如何停止整个渲染/注入过程并自己做一些事情直到callback？
3)然后,如何恢复？)))
4)或者也许有一些我错过的东西......