使用javascript进行MouseOver CSS3D效果

我试图像这样实现mouseOver效果。

我能够根据它们的位置生成每个瓷砖所需的css3d矩阵。

我已经通过慢速鼠标移动实现了这种效果，但是如果我从一个瓷砖快速移动到另一个瓷砖，则它不能正常更新。 它在瓷砖之间显示出差距。 在鼠标hover时更新所有tile / tile坐标的最佳方法是什么，以便获得一致的效果？

这是我的js代码：

$('.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 < 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 < 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 < $('.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 = tp; 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 = tp; var p1 = pts[ei + Math.floor(i / 4)], p2 = pts[ei + Math.floor(i / 4) + 1], p3 = pts[ei + Math.floor(i / 4) + 6], p4 = pts[ei + 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 = tp; var p1 = pts[ei + Math.floor(i / 4)], p2 = pts[ei + Math.floor(i / 4) + 1], p3 = pts[ei + Math.floor(i / 4) + 6], p4 = pts[ei + 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); 

我的代码中的BLEND.TransformElement（el，src，dest）给出了CSS3D矩阵，它运行正常。 我需要正确更新顶点。

这是我的HTML和CSS：

  .box{ float: left; background: #2b5349; transform-origin: 0px 0px; }  
 
 
 
 
 
 
 
 
 
 
 
 
  

我从头开始做这一切，而不使用任何外部插件来实现特定效果。 请提出一些解决方案。

我已存储所有切片的所有顶点并在鼠标hover时更新它。 只要我从一个图块鼠标hover到另一个图块，将顶点值从新图块重置为原始图块。 如何在mouseenter和mouseleave envent上修复顶点更新问题。

Answer 1

我解决了这个问题。 问题是没有在Vertout事件上将顶点值更新为原始值。 要将顶点值还原为原始问题，我必须像这样保留顶点的额外值。

 var l = { x: Math.floor(i % c) * 284, y: Math.floor(i / c) * 284, x2: Math.floor(i % c) * 284, y2: Math.floor(i / c) * 284, }; 

在鼠标hover时，为每个坐标更改此顶点值

  TweenMax.to(p1, .3, { x: p1.x2 + d, y: p1.y2 - d, ease: Back.easeOut }) 

并在mouseout上重置原始位置

  TweenMax.to(p2, .3, { x: p2.x, y: p2.y, ease: Back.easeOut }) 

Answer 2

你有这个工作的灵活数量的列。 目前它似乎只适用于4！