我用CSS3建構了一個正方體,想用滑鼠控制正方體的旋轉(X軸與Y軸)
查看頁面
旋轉的核心程式碼大概是這樣的:
var box = $("#box"); //box是3D对像的容器;
var option_n = 0.5; //灵敏度
box.on('mousedown',function(e){
if(e.button === 0){
mouse_left(e);
return false;
}
})
function mouse_left(e){ //合并旋转值,有bug
var x,y;
var zb_b = [e.pageX,e.pageY];
var oldt = box.css('transform');
$(document).on('mousemove.dh',function(e){
var zb_e = [e.pageX,e.pageY];
y = ((zb_e[0] - zb_b[0]) * option_n);
x = (-(zb_e[1] - zb_b[1]) * option_n);
var transform = 'rotateY('+y+'deg)' +' rotateX('+x+'deg)';
dom.css('transform',oldt + transform);
}).on('mouseup.dh',function(e){
$(document).off('mousemove.dh');
$(document).off('mouseup.dh');
})
}出現的問題是這樣的,第一次操作沒有問題,後面就會有問題,原因是旋轉操作貌似旋轉的是整個坐標軸,導致後續再旋轉就出問題了.
頁面中有一個"模式切換"按鈕, 切換之後的效果就是我想要的,但是這個實現是每次旋轉都要嵌套兩個父結點,旋轉的都是父結點來達到效果的,多次控制之後DOM層級就會非常深,這樣肯定是不行的.
肯請大神指點一二
http://runjs.cn/code/urduzcae
改成左乘即可。
理解這個問題，不需要了解太多矩陣的知識，可以把矩陣實現當成黑盒，來看矩陣計算順序與父子矩陣影響：
計算累計變換矩陣 accumulated 3D transformation matrix
從單位矩陣開始，對於從3D渲染上下文(每個聲明了
preseve-3d的元素)的根元素到當前元素的每一個包含快：累積變換矩陣乘以其包含區塊上的perspective矩陣
累積變換矩陣乘以目前塊相對其包含塊的水平、垂直位移矩陣
累積變換矩陣乘以變換矩陣
直到計算到目前元素，得到最終累積變換矩陣。
——W3C CSS Transform WD: 6.1 3D Transform Rendering
需要注意的是第3步，以這樣的標準，如果我們要做出這樣的變換，左側變換就是：
當然，如果對矩陣實作有興趣，我也在《前端中的變換矩陣》中粗淺地介紹了。這個問題的核心是矩陣乘法在大部分情況下都不符合乘法交換律。