我可以根据自己的位置生成每个瓦片所需的css3d矩阵.

我用缓慢的鼠标移动实现了这个效果,但是如果我从一个瓦片快速移动到另一个瓦片,它的更新正确.它在瓷砖之间显示出差距.什么是最新的方式更新所有的瓷砖/瓦片坐标在鼠标悬停,使我得到一致的效果？

这是我的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 = 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,{
                            x: p2.x + d,y: p2.y - d,TweenMax.to(p3,{
                            x: p3.x + d,y: p3.y + d,TweenMax.to(p4,{
                            x: p4.x - d,y: p4.y + d,TweenMax.to(e.el,{
                            zIndex: 10,ease: Back.eaSEOut
                        });

                    },function() {
                        TweenMax.killTweensOf(p1),TweenMax.killTweensOf(p4);

                        TweenMax.to(p1,.7,{
                            x: p1.x + d,y: p1.y + d,{
                            x: p2.x - d,y: p2.y + d,{
                            x: p3.x - d,y: p3.y - d,{
                            x: p4.x + d,y: p4.y - d,{
                            zIndex: 0,ease: Back.eaSEOut
                        });
                    });
                },update: function() {
                    var e = this;
                    var pts = t.p;
                    var p1 = pts[e.i + Math.floor(i / 4)],p4 = pts[e.i + Math.floor(i / 4) + 5];
                    BLEND.TransformElement(
                            {
                                el: e.el[0],src: [{x: 0,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：

<style>
       .Box{
            float: left;
            background: #2b5349;
            transform-origin: 0px 0px;
        }
    </style>

    <div class="w" style=" margin-bottom:190px;display:inline-block;width: calc(284px * 4); margin:100px auto;">
        <div class="Box" style="background: red"></div>
        <div class="Box" style="background: #2b5349"></div>
        <div class="Box" style="background: green"></div>
        <div class="Box" style="background: blue"></div>
        <div class="Box" style="background: darkgoldenrod"></div>
        <div class="Box" style="background: fuchsia"></div>
        <div class="Box" style="background: lightpink"></div>
        <div class="Box" style="background: mediumspringgreen"></div>
        <div class="Box" style="background: burlywood"></div>
        <div class="Box" style="background: orange"></div>
        <div class="Box" style="background: gold"></div>
        <div class="Box" ></div>
    </div>

我从头开始做这些,而不使用任何外部插件的特殊效果.请建议一些解决方案.

我已经存储了所有tile的所有顶点,并在mouSEOver上更新它.一旦我将鼠标悬停从一个瓦片到另一个动画,将顶点值从新的顶点重新设置为原始的停止点.如何修复mouseenter和mouseleave envent上的顶点更新问题.