MouseOver CSS3D effect with javascript

后端 未结 2 929
梦谈多话
梦谈多话 2021-02-14 10:49

I am trying to achieve mouseOver effect like this.

\"enter

I am able to generate c

2条回答
  •  误落风尘
    2021-02-14 11:48

    I Solved the problem. Problem was with not updating vertices value to the original on mouseout event. to revert vertices value to original question i have to keep extra value of vertices like this.

    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,
    
                };
    

    On mouseover change the vertice value like this for every coordinate

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

    and on mouseout reset original position

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

提交回复
热议问题