根据鼠标移动用translate3d改变div位置

Question

我想用csstransform translate3d根据鼠标移动实现subtil div位置变化的效果。类似于本网站主页部分的几何图形： http://riccardozanutta.com/

我试过这个：

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

单个图像绝对定位并且它有效（图像根据鼠标移动改变位置），但是当我尝试使用 class .basic-skill[= 制作 3 divs 动画时14=]

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

它们超出视口（相对定位时）或相互重叠（绝对定位时）。

此外，我不知道如何将移动限制为最大 5 px，而不是让它在整个视口移动。

非常感谢您的指导！

Answer 1

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

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

编辑： 除了使用 top 和 left，您可以使用 margin-top 和 margin-left 静态 top 和 CSS 中的 left 值。 JSFiddle

CSS

position: absolute;
top: 50px;
left: 50px;

JS

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

编辑 2： 增强 Fiddle：https://jsfiddle.net/qcoy5xpg/2/

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

Change div position with translate3d according to the mouse movement