1

我有这个生成 div 的代码。通过使用矩阵应用 css 变换属性,我将获得立方体的三个面,正确对齐 div。问题出在左侧 div 中。设置数组leftArr比例(d *比例),我无法正确垂直对齐顶部div的div左侧。谁能告诉我获得立方体模拟的最佳方法。

谢谢你。


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

比例 = 1

比例 = 2

比例 = 2

比例 = 3

比例 = 3


更新:

经过一些测试:

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

代码有意义,但如果有更好的解决方案,任何帮助都将不胜感激。

4

1 回答 1

1

您正在使用 2d 变换在 3d 中旋转。如果您想要一个优雅的解决方案,您应该使用维度为 4 的 3d 矩阵。然后您将让左侧从下方旋转 90 度;并且将对其应用相同的翻译。

如果您想使用 2d 变换,那么最好的方法是预先计算每个面的 2d 变换。然后计算所有立方体的平移矩阵(只有 1 个矩阵,您同时移动所有面)。每个人脸的矩阵将是平移矩阵和人脸矩阵的乘积。(请记住,这不是可交换的,顺序很重要)

于 2013-01-21T21:25:18.270 回答