title: MouseOver CSS3D effect with javascript
body: <p>I am trying to achieve mouseOver effect like this.</p>
  
  <p><img src="https://i.stack.imgur.com/FoYac.png" alt="enter image description here"></p>
  
  <p>I am able to generate css3d matrix required for each and every tile according to their position.</p>
  
  <p>I have achieved this effect with slow mouse movement, but if I am moving fast from one tile to another tile its notupdating properly. its showing gap in between tiles. What is the best way to update all the tile/tile co-ordinates on mouseover so that i get consistent effect?</p>
  
  <p>here is my js code:</p>
  
  <pre><code> $('.box').each(function() {
              $(this).css('height', '284px');
              $(this).css('width', '284px');
          });
  
          generateGrid = function(w, h) {
              var t = this;
              this.p = [];
              var d = 30;
  
  
              var c = Math.floor($('.w').outerWidth() / 284 + 1);
              var r = Math.ceil($('.w').outerHeight() / 284) + 1;
              var vc = c * r;
              for (i = 0; i &lt; vc; i++) {
                  var l = {
                      x: Math.floor(i % c) * 284,
                      y: Math.floor(i / c) * 284
                  };
                  this.p.push(l);
              }
              var m = m || {};
  
              m.Grid = function() {
                  this.elms = [];
                  this.init();
              }, m.Grid.prototype = {
                  init: function() {
                      this.createTiles();
                  },
                  animateTile: function() {
                      var e = this;
                      for (i = 0; i &lt; e.elms.length; i++) {
                          console.log(i);
                          e.elms[i].update();
                      }
                      requestAnimationFrame($.proxy(this.animateTile, this));
                  },
                  createTiles: function() {
                      var c = this;
                      for (i = 0; i &lt; $('.box').length; i++) {
                          c.elms.push(new m.tile($('.box:eq(' + i + ')'), i));
                      }
  
                      c.animateTile();
                  }
              }, m.tile = function(e, i, pt) {
                  this.el = e;
                  this.i = i;
                  var p = t.p;
                  this.elX = Math.floor(i % 4) * 284,
                          this.elY = Math.floor(i / 4) * 284,
                          this.p1 = p[i + Math.floor(i / 4)],
                          this.p2 = p[i + Math.floor(i / 4) + 1],
                          this.p3 = p[i + Math.floor(i / 4) + 6]
                  this.p4 = p[i + Math.floor(i / 4) + 5];
  
  
                  this.init();
              }, m.tile.prototype = {
                  init: function() {
  
                      this.initEvents();
                  },
                  initEvents: function() {
                      var e = this;
                      var pts = t.p;
                      var p1 = pts[e.i + Math.floor(i / 4)],
                              p2 = pts[e.i + Math.floor(i / 4) + 1],
                              p3 = pts[e.i + Math.floor(i / 4) + 6],
                              p4 = pts[e.i + Math.floor(i / 4) + 5];
  
  
                      $(e.el).hover(function() {
                          TweenMax.killTweensOf(p1),
                                  TweenMax.killTweensOf(p2),
                                  TweenMax.killTweensOf(p3),
                                  TweenMax.killTweensOf(p4),
                                  TweenMax.to(p1, .3, {
                              x: p1.x - d,
                              y: p1.y - d,
                              ease: Back.easeOut
                          }),
                          TweenMax.to(p2, .3, {
                              x: p2.x + d,
                              y: p2.y - d,
                              ease: Back.easeOut
                          }),
                          TweenMax.to(p3, .3, {
                              x: p3.x + d,
                              y: p3.y + d,
                              ease: Back.easeOut
                          }),
                          TweenMax.to(p4, .3, {
                              x: p4.x - d,
                              y: p4.y + d,
                              ease: Back.easeOut
                          }),
                          TweenMax.to(e.el, .3, {
                              zIndex: 10,
                              ease: Back.easeOut
                          });
  
                      }, function() {
                          TweenMax.killTweensOf(p1),
                                  TweenMax.killTweensOf(p2),
                                  TweenMax.killTweensOf(p3),
                                  TweenMax.killTweensOf(p4);
  
                          TweenMax.to(p1, .7, {
                              x: p1.x + d,
                              y: p1.y + d,
                              ease: Back.easeOut
                          }),
                          TweenMax.to(p2, .7, {
                              x: p2.x - d,
                              y: p2.y + d,
                              ease: Back.easeOut
                          }),
                          TweenMax.to(p3, .7, {
                              x: p3.x - d,
                              y: p3.y - d,
                              ease: Back.easeOut
                          }),
                          TweenMax.to(p4, .7, {
                              x: p4.x + d,
                              y: p4.y - d,
                              ease: Back.easeOut
                          }),
                          TweenMax.to(e.el, .7, {
                              zIndex: 0,
                              ease: Back.easeOut
                          });
                      });
                  },
                  update: function() {
                      var e = this;
                      var pts = t.p;
                      var p1 = pts[e.i + Math.floor(i / 4)],
                              p2 = pts[e.i + Math.floor(i / 4) + 1],
                              p3 = pts[e.i + Math.floor(i / 4) + 6],
                              p4 = pts[e.i + Math.floor(i / 4) + 5];
                      BLEND.TransformElement(
                              {
                                  el: e.el[0],
                                  src: [{x: 0, y: 0}, {x: w, y: 0}, {x: w, y: h}, {x: 0, y: h}],
                                  dest: [
                                      {x: p1.x - e.elX,
                                          y: p1.y - e.elY},
                                      {x: p2.x - e.elX,
                                          y: p2.y - e.elY},
                                      {x: p3.x - e.elX,
                                          y: p3.y - e.elY},
                                      {x: p4.x - e.elX,
                                          y: p4.y - e.elY},
                                  ]
                              });
                  }
              };
  
              t.grid = new m.Grid();
          };
          generateGrid(284, 284);
  </code></pre>
  
  <p>BLEND.TransformElement(el,src,dest) in my code gives CSS3D matrix, it's working fine. I need to update vertices properly.</p>
  
  <p>Here is my html and CSS:</p>
  
  <pre><code>&lt;style&gt;
         .box{
              float: left;
              background: #2b5349;
              transform-origin: 0px 0px;
          }
      &lt;/style&gt;
  
      &lt;div class="w" style=" margin-bottom:190px;display:inline-block;width: calc(284px * 4); margin:100px auto;"&gt;
          &lt;div class="box" style="background: red"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: #2b5349"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: green"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: blue"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: darkgoldenrod"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: fuchsia"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: lightpink"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: mediumspringgreen"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: burlywood"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: orange"&gt;&lt;/div&gt;
          &lt;div class="box" style="background: gold"&gt;&lt;/div&gt;
          &lt;div class="box" &gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I am doing all this this from start without using any external plugin for that particular effect. Please suggest some solution.</p>
  
  <p>I have stored all the vertices of all tiles and updating it on mouseover. as soon as I mouseover from one tile to another animation for resetting vertices values from new one to original stops. How can I fix vertices update problem on mouseenter and mouseleave envent.</p>