我有生成 div 的代码。 通过使用矩阵应用 css 变换属性,我将获得立方体的三个面,正确对齐 div。 问题出在左侧的 div 中。设置数组 leftArr scale (d * scale),我无法正确垂直对齐顶部 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
比例 = 2
比例 = 3
更新:
经过一些测试:
var ly = ty + dY/2 + ( ( (dY/2)*(scale-1) ) / 2);
代码有道理,但如果有更好的解决方案,我们将不胜感激。
最佳答案
您正在使用 2d 变换在 3d 中旋转。 如果你想要一个优雅的解决方案,你应该使用维度为 4 的 3d 矩阵。 然后,您将使左侧从下方转 90 度;并且将对其应用相同的翻译。
如果您想使用二维变换,那么最好的方法是为每个面预先计算二维变换。然后计算所有立方体的平移矩阵(只有 1 个矩阵,同时移动所有面)。每个人脸的矩阵将是平移矩阵和人脸矩阵的乘积。 (请记住,这不是可交换的,顺序很重要)
关于javascript - 带有轴刻度的 JS/CSS 矩阵立方体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14067560/