如何根据鼠标位置更改元素透视答案

【问题标题】：How to change elements perspective based on mouse position如何根据鼠标位置更改元素透视
【发布时间】：2020-07-27 23:31:15
【问题描述】：

我想知道如何复制this effect，您悬停在其中的元素似乎会旋转离开鼠标。

我已经研究出如何使用 css 变换来改变 3d 空间中的元素，如下所示：

.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>

但我不确定如何使用 javascript 使其根据鼠标位置进行更新。

【问题讨论】：

这可能是您正在寻找的一个很好的教程：technokami.in/…

标签： javascript html css 3d css-transforms

【解决方案1】：

这不是我非常熟悉的东西，但是查看页面的源文件，看起来这是与该功能相关的 javascript：

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

请记住，您通常可以通过打开 Chrome 开发工具 --> 源选项卡 --> 查找您要查找的文件（在本例中为 pixi.js）来查看页面源文件

还要注意他们正在使用matrix3d() css 函数，这与您所拥有的有点不同..

【讨论】：

谢谢。不是我想要的（因为它使用 jQuery），但我应该可以从这里工作！

【解决方案2】：

这个特定的网站使用一个名为 TweenMax 的库来实现这种效果，这里有一个更通用的函数来模拟对任何元素的这种效果

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

请记住，您需要 jQuery 和 TweenMax 1.18.0 才能使这个确切的功能正常工作

【讨论】：