帶軸座標的JS/CSS矩陣立方體

我有生成div的這段代碼。通過應用使用矩陣的CSS變換屬性，我會得到一個立方體的三個面，正確對齊div。問題出在左邊的div。設置數組leftArr縮放（d *縮放），我不能正確地垂直正確div div頂部div的左側。任何人都可以告訴我一個模擬立方體的最佳方法。帶軸座標的JS/CSS矩陣立方體

謝謝。

CSS：

.face { 
     height: 50px; 
     overflow: hidden; 
     position: absolute; 
     width: 50px; 
     }

JS：

var angle = 45, 
    r = parseFloat(angle) * (Math.PI/180), 
    cos_theta = Math.cos(r), 
    sin_theta = Math.sin(r); 

var a = cos_theta, 
    b = sin_theta, 
    c = -sin_theta, 
    d = cos_theta; 


var face = 50, //reference to .face class 
    k = 0, 
    j = 100; //constant 

var scale = 3; 
var dX = face * Math.SQRT2 * scale; 
var dY = face * Math.SQRT2; 


for(var i = 0; i < 3; i++){ 

    var tx = j + k; 
    var ty = j; 
    var lx = j + k - dX/4; 
    var ly = ty; 

    var topArr = [a * scale, b, c * scale, d, tx, ty]; 
    var leftArr = [a * scale, b, 0, d * scale, lx, ly]; 

    var top = 'matrix(' + topArr.join(',') + ')'; 
    var left = 'matrix(' + leftArr.join(',') + ')'; 

    k += dX; 

    $('<div/>', { 
       id : 'top_'+i, 
       'class' : 'face', 
       css : { 
         'background' : 'hsla(' + parseInt(Math.random() * 90) + ', 100%, 50%, 0.5)', 
         'transform' : top 
         } 
       }).appendTo('body'); 

    $('<div/>', { 
        id : 'left_'+i, 
        'class' : 'face', 
        css : { 
          'background' : 'hsla(' + parseInt(Math.random() * 90) + ', 100%, 50%, 0.5)', 
          'transform' : left 
         } 
        }).appendTo('body');      
}

實施例：

量表= 1

Scale = 1

量表= 2

Scale = 2

量表= 3

Scale = 3

UPDATE：

一些測試與後：

var ly = ty + dY/2 + (((dY/2)*(scale-1))/2);

代碼很有意義，但是如果有更好的解決方案，任何幫助都會很感激。

來源

2012-12-28 Alex Ball

您正在使用2D變換以3D形式旋轉。如果你想要一個優雅的解決方案，你應該使用尺寸爲4的三維矩陣。然後你會讓左側從90度轉向下來;同樣的翻譯將適用於此。

如果你想使用2D變換，那麼最好的方法是預先計算每個面的2D變換。然後計算所有立方體的轉換矩陣（只有1個矩陣，您同時移動所有的面）。每個面的矩陣將是平移矩陣和麪矩陣的乘積。（請記住，這不是相互矛盾的，順序很重要）

來源

2013-01-21 21:25:18 vals

好的，我知道3d矩陣。這將是一個測試，僅使用3個面（頂部，左側，右側）製作一個「僞」3D立方體，並使其透視變換爲「視覺效果」，例如x軸（拉伸x）或z軸平移軸。我僅使用3個面，因爲我必須多次複製「立方體」，並且瀏覽器在渲染許多「立方體」的許多面時會遇到一些問題。順便說一下，如果您添加右臉簡單副本並翻譯左臉，上述測試工作（不好，但工作）。問題是當你改變角度值...感謝幫助！ –

帶軸座標的JS/CSS矩陣立方體

回答

相關問題