带轴坐标的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矩阵立方体

回答

相关问题