javascript - 实现页面倾斜和鼠标移动缩放

看到此消息时，我试图在chat中搜索一些消息：



随着鼠标向左或向右移动，内容向左或向右倾斜，并且随着鼠标向上和向下移动，内容在放大或缩小。这真是一个了不起的效果，我非常喜欢。我想实现相同。

我现在检查了同一页面，但看不到此页面。

有人可以告诉我该怎么做吗？

最佳答案

这样可以将屏幕旋转到鼠标指针的方向。

这是关于CodePen.io的示例

您所需要做的就是将body事件的EventListener添加到mousemove并应用css3 Transformation。

正如我之前从未做过的那样，您可能需要稍微调整一下转换。

我将webkitTransform属性用于示例目的。您可能需要查找兼容性列表



这是在Image中进行转换的代码

window.addEventListener("mousemove",function(e) {

  var width = window.innerWidth;
  var height = window.innerHeight;
  var clientHeight = document.body.clientHeight;
  var skew = {}
  skew.y = (20 * ((e.x / width) - 0.5))
  skew.x = -(20 * ((e.y / height) - 0.5));

  document.body.style.webkitTransform = "perspective("+clientHeight+"px) rotateX("+skew.x+"deg) rotateY("+skew.y+"deg)"
})

编辑：使用主体clientHeight作为透视图，似乎更好