Javascript 具有轴比例的JS/CSS矩阵立方体

我有生成div的代码。 通过使用矩阵应用css变换属性，我可以得到立方体的三个面，正确对齐div。 问题在于左分区。设置数组leftArr scale（d*scale）时，我无法与上分区的左侧垂直对齐。 有谁能告诉我获得立方体模拟的最佳方法吗

多谢各位

---

CSS:

JS:

---

代码很有道理，但如果有更好的解决方案，我们将不胜感激。

您正在使用2d变换在3d中旋转。 如果你想要一个优雅的解决方案，你应该使用三维矩阵，尺寸为4。 然后，你会让左侧从一个90度的角度从下侧转向；同样的翻译也适用于此

---

如果要使用二维变换，最好的方法是为每个面预先计算二维变换。然后计算所有立方体的平移矩阵（仅1个矩阵，同时移动所有面）。每个面的矩阵将是平移矩阵和面矩阵的乘积。（请记住，这不是可变的，顺序很重要）

您正在使用2d变换在3d中旋转。 如果你想要一个优雅的解决方案，你应该使用三维矩阵，尺寸为4。 然后，你会让左侧从一个90度的角度从下侧转向；同样的翻译也适用于此

---

如果要使用二维变换，最好的方法是为每个面预先计算二维变换。然后计算所有立方体的平移矩阵（仅1个矩阵，同时移动所有面）。每个面的矩阵将是平移矩阵和面矩阵的乘积。（请记住，这不是可变的，顺序很重要）

是的，好的，我知道3d矩阵。这将是一个测试，仅使用3个面（顶部、左侧、右侧）制作“伪”3d立方体，并使其在透视“视觉效果”中变换，例如在x轴（拉伸x轴）或z轴上平移。我使用3个面只是因为我必须多次复制“立方体”，而浏览器在渲染多个“立方体”的多个面时遇到一些问题。顺便说一下，如果您添加右面简单复制并平移左面，则上述测试可以工作（不是很好，但可以工作）。问题是当您更改角度值时。。。谢谢你的帮助！！！好的，我知道3d矩阵。这将是一个测试，仅使用3个面（顶部、左侧、右侧）制作“伪”3d立方体，并使其在透视“视觉效果”中变换，例如在x轴（拉伸x轴）或z轴上平移。我使用3个面只是因为我必须多次复制“立方体”，而浏览器在渲染多个“立方体”的多个面时遇到一些问题。顺便说一下，如果您添加右面简单复制并平移左面，则上述测试可以工作（不是很好，但可以工作）。问题是当您更改角度值时。。。谢谢你的帮助！！！

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

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');                    
}

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