我有这个生成 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
比例 = 2
比例 = 3
更新:
经过一些测试:
var ly = ty + dY/2 + ( ( (dY/2)*(scale-1) ) / 2);
代码有意义,但如果有更好的解决方案,任何帮助都将不胜感激。