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

Question

我想知道如何复制这种效果，因为悬停在上面的元素似乎会旋转远离鼠标。

我已经学会了如何使用css转换来改变三维空间中的元素，如下所示：

.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使其根据鼠标位置进行更新。

Answer 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函数，这与您所使用的有点不同。。

Answer 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才能使这个确切的功能正常工作