Frigoprangoma
New Member
I have this code that generates the div.By applying the css transform property using matrix, I would to get the three faces of a cube, aligning the div properly.The problem is in the left div. Setting array leftArr scale (d * scale), I can not align vertically correctly div left side of the top div.Can anyone tell me the best way to get a simulation of a cube.Thank you.CSS:\[code\].face { height: 50px; overflow: hidden; position: absolute; width: 50px; } \[/code\]JS:\[code\]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; //constantvar 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'); }\[/code\]Example:Scale = 1
Scale = 2
Scale = 3
