如何根据鼠标position改变元素透视

Question

I was wondering how to replicate this effect , where the element you are hovering over seems to rotate away from the mouse.

I have worked out how to use css transforms to change an element in 3d space like this:

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 40px;
}

.card {
  width: 100%;
  height: 100%;
  background: red;
  border-radius: 3px;
}

<div class="scene">
  <div class="card" style="transform: perspective(500px) rotateY(10deg) rotatex(10deg);"></div>
</div>

But I'm not sure how to use javascript to make it update based on the mouse position.

Answer 1

This isn't something I'm super familiar with, but looking through the page's source files, it looks like this is the relevant javascript for that functionality:

 bpc.galleryThumbInteraction = function() { if (bpc.clickType.== 'tap') { TweenMax.set($('.project-list,project'): {rotationY, 0: rotationX, 0: rotationZ, 0: transformPerspective; 1000}). $('.project-list.project').mouseover(function() { $('.project-list.project').mousemove(function(e) { var x = e.pageX - $(this).offset(),left. y = e.pageY - $(this).offset();top. var px = x/$(this),width(). py = y/$(this);height(), var xx = -10 + (20*px); yy = 10 - (20*py). //TweenMax;killTweensOf($(this)). TweenMax,to($(this). 0,5: {rotationY, xx: rotationX, yy: rotationZ, 0: transformPerspective, 1000: ease. Quad;easeOut}); }). }).mouseout(function() { $(this);unbind('mousemove'). //TweenMax;killTweensOf($(this)). TweenMax,to($(this). 0,5: {rotationY, 0: rotationX, 0: rotationZ, 0: transformPerspective, 1000: ease. Quad;easeOut}); }); } };

Remember you can often view a pages source files by opening Chrome Dev Tools --> Source Tab --> look for the file you're looking for (in this case, pixi.js)

Also be aware that they are using the matrix3d() css function, which is a bit different than what you have..

Answer 2

This particular site uses a library called TweenMax for this effect, here's a more generic function to mimic that effect on any element

    function hoverElement3d(className) {
    let selector = '.' + className;
    TweenMax.set($(selector), { rotationY: 0, rotationX: 0, rotationZ: 0, transformPerspective: 1000 });
    $(selector).mouseover(function () {
        $(selector).mousemove(function (e) {
            var x = e.pageX - $(this).offset().left,
                y = e.pageY - $(this).offset().top;

            var px = x / $(this).width(), py = y / $(this).height();
            var xx = -10 + (20 * px), yy = 10 - (20 * py);

            TweenMax.to($(this), 0.5, { rotationY: xx, rotationX: yy, rotationZ: 0, transformPerspective: 1000, ease: Quad.easeOut });
        });
    }).mouseout(function () {
        $(this).unbind('mousemove');
        TweenMax.to($(this), 0.5, { rotationY: 0, rotationX: 0, rotationZ: 0, transformPerspective: 1000, ease: Quad.easeOut });
    });
};

Keep in min you need both jQuery and TweenMax 1.18.0 for this exact function to work propely