CSS3D matrix generation

Question

I am trying to achieve following effect using css3 and javascript when we move mouse to center div (MouseOver effect)

I have created small library which accepts 3 arguments element,sourcePoints,destination points and returns css3D matrix and update element. here is my javascript code.

var BLEND = BLEND || {};

BLEND.Util = BLEND.Util || {};

function print(msg) {
    console.log(msg);
}
BLEND.Util.VendorPrefix = "";
BLEND.Util.DetectVendorPrefix = function() {
var styles = window.getComputedStyle(document.documentElement, ''),
        pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']))[1];
BLEND.Util.VendorPrefix = pre[0].toUpperCase() + pre.substr(1) + "Transform";
}
BLEND.Util.DetectVendorPrefix();
BLEND.TransformElement = function(elm, src, dest) {
var L = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
var R = [0, 0, 0, 0, 0, 0, 0, 0];

for (var i = 0; i < 4; i++) {
    L[i] = [];
    L[i][0] = L[i + 4][3] = src[i].x;
    L[i][2] = L[i + 4][4] = src[i].y;
    L[i][2] = L[i + 4][5] = 1;
    L[i][3] = L[i][4] = L[i][5] = L[i + 4][0] = L[i + 4][3] = L[i + 4][2] = 0;
    L[i][6] = -src[i].x * dest[i].x;
    L[i][7] = -src[i].y * dest[i].x;
    L[i + 4][6] = -src[i].x * dest[i].y;
    L[i + 4][7] = -src[i].y * dest[i].y;

    R[i] = dest[i].x;
    R[i + 4] = dest[i].y;
}


var RM = [];
for (i = 0; i < R.length; i++) {
    RM[i] = [R[i]];
}

var Left = Matrix.create(L);
var Right = Matrix.create(R);

var res = Matrix.calculate(Left, Right);

print (res);

 if (BLEND.Util.VendorPrefix == 'WebkitTransform') {

 var matrix3D = new CSSMatrix();
 matrix3D.m11 = res.get(0,0);
 matrix3D.m12 = res.get(3,0);
 matrix3D.m13 = 0;
 matrix3D.m14 = res.get(6,0);

 matrix3D.m21 = res.get(1,0);
 matrix3D.m22 = res.get(4,0);
 matrix3D.m23 = 0;
 matrix3D.m24 = res.get(7,0);

 matrix3D.m31 = 0;
 matrix3D.m32 = 0;
 matrix3D.m33 = 1;
 matrix3D.m34 = 0;

 matrix3D.m41 = res.get(2,0);
 matrix3D.m42 = res.get(5,0);
 matrix3D.m43 = 0;
 matrix3D.m44 = 1;

 elm.style.webkitTransform = matrix3D;
 } else {
 if (BLEND.Util.VendorPrefix === "")
 BLEND.Util.DetectVendorPrefix();
 elm.style[BLEND.Util.VendorPrefix] = "matrix3d(" + res.get(0,0) + "," + res.get(3,0) + ", 0," + res.get(6,0) + "," + res.get(1,0) + "," + res.get(4,0) + ", 0," + res.get(7,0) + ",0, 0, 1, 0," + res.get(2,0) + "," + res.get(5,0) + ", 0, 1)";
 } 
}

UPDATE: Here is JSFiddle

I am calling TransformElement method for each of 9 div with proper source and destination coordinates. But its not working as expected. Please suggest the possible solution. can we do it using three.js in anyway (just asking may be its silly idea)?

UPDATE: Can we do it with CSS3D renderer and Three.js.

Idea is to create plane and slice it in 3x3 grid and on mouse over of each face of plane we can scale that div upside and respectivly we have to scale others div according to current div? Is it possible?

Answer 1

I didn't try to use your library but here is my solution to your problem: http://codepen.io/bali_balo/pen/87b980a2acf722b1c9feb35f3fcb1c65/ (I used Haml and SCSS, you can see compiled code by clicking the little eye on the top right corner of each panel)

I used this article to write this code.

9 matrices are computed first (corresponding to the hovered tile and every surrounding ones), using numericjs and fomulas available on the article linked before. Then on mouseover these matrices are applied to the corresponding tiles. Here is the code to get the transform matrix knowing the locations of 4 points before and after transformation:

//from and to are arrays of 4 objects containing a property x and a property y
//describing the 4 points of the quadrilateral to transform
function getTransform(from, to)
{
  var A = [], i;
  for(i = 0; i < 4; i++)
  {
      A.push([from[i].x, from[i].y, 1, 0, 0, 0, -from[i].x * to[i].x, -from[i].y * to[i].x]);
      A.push([0, 0, 0, from[i].x, from[i].y, 1, -from[i].x * to[i].y, -from[i].y * to[i].y]);
  }
  var b = [];
  for(i = 0; i < 4; i++)
  {
      b.push(to[i].x);
      b.push(to[i].y);
  }
  //Uses numericjs to solve matrices equations
  //returns h knowing A and b where A.h = b
  var h = numeric.solve(A, b);
  //Column major representation
  return [[h[0], h[3], 0, h[6]],
          [h[1], h[4], 0, h[7]],
          [ 0  ,  0  , 1,  0  ],
          [h[2], h[5], 0,  1  ]];
}

Note that, as mentionned in my code, if you want to animate transitions, you can't just use CSS (as it would just transition each number of the matrix, but this would rarely give an appropriate result). You could try doing it using javascript but it might be a bit slow (I didn't test it), because you could not cache matrices and would have to compute them at every frame.