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

Question

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

当鼠标向左或向右移动时，内容向左或向右倾斜，随着鼠标上下移动，内容放大或缩小。这是一个非常棒的效果，我真的很喜欢它。我想实现同样的目标。

我现在检查了同一页，我看不到这个。

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

Answer 1

这会将屏幕旋转到鼠标指针的方向。

以下是CodePen.io

上的示例

您只需要为body事件的mousemove添加一个EventListener并应用css3转换。

由于我之前从未这样做过，您可能需要稍微调整一下转换。

我使用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)"
})

编辑：使用bodys clientHeight作为透视，看起来好一点

Answer 2

嗯，它的丑陋但你可以修改转换，使它看起来更逼真： http://jsfiddle.net/c5E6g/

<div id="container">
    Hey!
</div>

CSS：

#container{
    background-color:gray;
    border:1px solid #111;
}

JavaScript的：

document.onmousemove = function(e) {
    document.getElementById("container").style.transform = "skewx("+e.clientX+"deg) translatex(150px)";
};

它只是一个改变变换skewX值的函数。我刚刚使用了原始X光标位置，您可以使用页面宽度来计算更合适的值。或者甚至更好，稍微修改偏斜。