Jquery 根据鼠标移动，使用translate3d更改div位置

我想通过css transform translate3d根据鼠标移动实现subtil div位置变化的效果。 类似于本网站主页部分的几何图形：

我试过这个：

$(window).mousemove(function(event) {
  $(".home-img").css({"left" : event.pageX, "top" : event.pageY});
});

当我尝试用class.basic技巧制作3个div的动画时，一张绝对定位的图片就成功了（图片根据mousemove改变了位置）

$(window).mousemove(function(event) {
  $(".basic-skill").css({"left" : event.pageX, "top" : event.pageY});
});

它们离开视图端口（当它们处于相对位置时）或彼此重叠（当它们处于绝对位置时）

此外，我不知道如何将移动限制为最大5px，而不是使其在整个视图端口上移动

---

非常感谢您的指导

要解决最大5px位移的问题，可以将X和Y坐标乘以系数0.1，以减少移动量。像这样：

$(".basic-skill").css({"left" : event.pageX * 0.1, "top" : event.pageY * 0.1});

编辑：不使用

top

和

left

，您可以在CSS中使用带有静态

top

和

left

值的

页边距top

和

页边距left

CSS

JS

编辑2:增强型小提琴：

---

但这只是一个简单而快速的过程。在您提供的演示页面中，他在SVG元素上使用了CSS动画。这就是为什么它看起来很优雅，如果我可以（测量）

解决你关于最大5px位移的问题，你可以将X和Y坐标乘以类似于0.1的因子来减少移动量。像这样：

$(".basic-skill").css({"left" : event.pageX * 0.1, "top" : event.pageY * 0.1});

编辑：不使用

top

和

left

，您可以在CSS中使用带有静态

top

和

left

值的

页边距top

和

页边距left

CSS

JS

编辑2:增强型小提琴：

---

但这只是一个简单而快速的过程。在您提供的演示页面中，他在SVG元素上使用了CSS动画。这就是为什么它看起来很优雅，如果我可以的话（easings）

你能提供一把小提琴吗？你能提供一把小提琴吗？谢谢你的回答！是否有可能将移动添加到当前css位置？我相信您的解决方案将我的元素的位置重置为默认值；谢谢你的回复！是否有可能将移动添加到当前css位置？我相信您的解决方案将我的元素的位置重置为默认值；

$("#two").css({"margin-left" : -(event.pageX * 0.1), "margin-top" : -(event.pageY * 0.1)});