Creating CSS3D matrices

Question

Creating CSS3D matrices

My goal is to achieve a specific effect using CSS3 and JavaScript, creating a MouseOver effect when the mouse moves over the center div.

I've developed a small library that takes in three arguments (element, sourcePoints, destination points) and returns a CSS3D matrix while updating the 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 invoking the TransformElement method for nine different divs with proper coordinates but it's not functioning as expected. Any suggestions on how to resolve this issue? Could it be achieved using Three.js in any way?

UPDATE: Can we accomplish this with CSS3D renderer and Three.js?

The concept is to create a plane and divide it into a 3x3 grid. When hovering over each face of the plane, that particular div should scale up while others adjust accordingly. Is this feasible?

javascript html css three.js

Answer 1

Answer №1

While I haven't had the chance to experiment with your library, I did come up with a solution for the issue you're facing: http://codepen.io/bali_balo/pen/87b980a2acf722b1c9feb35f3fcb1c65/. This implementation utilized Haml and SCSS, and the compiled code can be viewed by clicking on the small eye icon in each panel's top right corner.

To craft this code, I referenced this informative article.

The process involved computing 9 matrices initially (for the hovered tile as well as its neighboring tiles), leveraging numericjs and formulas highlighted in the aforementioned article. Subsequently, upon mouseover, these matrices were applied to the respective tiles. The following snippet showcases how the transform matrix is obtained based on 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
//representing the quadrilateral's 4 points pre-transformation
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);
  }
  //Utilizes numericjs to solve matrix equations
  //returns h given 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  ]];
}

It should be noted that, per my code comments, if animated transitions are desired, utilizing CSS alone may not suffice (as it could result in transitioning individual values of the matrix, which isn't always ideal). An alternative involving javascript might be considered, albeit potentially slower due to the necessity of recalculating matrices at each frame without caching.

Answer 2

While I haven't had the chance to experiment with your library, I did come up with a solution for the issue you're facing: http://codepen.io/bali_balo/pen/87b980a2acf722b1c9feb35f3fcb1c65/. This implementation utilized Haml and SCSS, and the compiled code can be viewed by clicking on the small eye icon in each panel's top right corner.

To craft this code, I referenced this informative article.

The process involved computing 9 matrices initially (for the hovered tile as well as its neighboring tiles), leveraging numericjs and formulas highlighted in the aforementioned article. Subsequently, upon mouseover, these matrices were applied to the respective tiles. The following snippet showcases how the transform matrix is obtained based on 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
//representing the quadrilateral's 4 points pre-transformation
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);
  }
  //Utilizes numericjs to solve matrix equations
  //returns h given 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  ]];
}

It should be noted that, per my code comments, if animated transitions are desired, utilizing CSS alone may not suffice (as it could result in transitioning individual values of the matrix, which isn't always ideal). An alternative involving javascript might be considered, albeit potentially slower due to the necessity of recalculating matrices at each frame without caching.

Creating CSS3D matrices

Answer №1

Similar questions

switch from material ui lists on/off

Finding the mouseover event for an element that is beneath an overlaid div

Troubleshooting Problem with Centering Rows in Bootstrap

Determine the prior location of an element using jQuery

What is the best way to transfer the JWT token from the server to the client using an HTTP header?

Construct a Product Showcase Page" (FreeCodeCamp) - Issue "Incurred upon clicking a .nav-link button in the navigation panel

Using http-proxy to forward request to a different port

Positioning items in a CSS grid layout involves ensuring that item 1 remains at the bottom of its column, while item 2 is centered within its column

How can I create subarrays from an array in JavaScript/jQuery based on their individual counts?

What is the best approach to decrease the size of a button in HTML and CSS when the text size is also reduced?

Alignment of UI Divs with CSS Bootstrap and HTML

event triggered when the values of dynamically added rows change

Shadows in THREE.JS are not being affected by the displacement map

Even after setting a value to an HTML input field from the C# code behind, any modifications to the text are not being displayed

Is it possible to utilize Angular validation directives programmatically within a personalized directive?

Using jQuery to show an Ajax loader while the page is loading

In Firefox, the CSS height and width values are displayed as X pixels, whereas in Internet Explorer, they are automatically set to 'auto'

Accessing Data from the Wikipedia API

Finding the Client's Private IP Address in React or Node.js: A Comprehensive Guide

How can I use AJAX to update a DIV when an image is swapped out?