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

Question

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

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

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

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

Answer 1

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

这是CodePen.io上的一个示例

您只需为事件添加一个 EventListenerbody并mousemove应用 css3 转换。

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

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

这是在图像中进行转换的代码

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 光标位置，您可以使用页面宽度来计算更合适的值。或者更好的是，也稍微修改一下 skewY。